From 1417e4abb1991ed70ff739e88c5df635e7720049 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@a8c.com>
Date: Thu, 8 Apr 2021 11:44:00 +1200
Subject: [PATCH] Switch to onBlur event

---
 .../block-library/src/image/image-editing/cropper.js   |  3 ---
 .../block-library/src/image/image-editing/index.js     |  2 --
 packages/block-library/src/image/image.js              | 10 ++++++++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/image/image-editing/cropper.js b/packages/block-library/src/image/image-editing/cropper.js
index f60e4d51c48de1..f72f8779a98f8c 100644
--- a/packages/block-library/src/image/image-editing/cropper.js
+++ b/packages/block-library/src/image/image-editing/cropper.js
@@ -23,7 +23,6 @@ export default function ImageCropper( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
-	onClick,
 } ) {
 	const {
 		isInProgress,
@@ -52,8 +51,6 @@ export default function ImageCropper( {
 				width: width || clientWidth,
 				height: editedHeight,
 			} }
-			onClick={ onClick }
-			onKeyDown={ onClick }
 			role="img"
 			aria-label={ __( 'Image editor cropping tool' ) }
 		>
diff --git a/packages/block-library/src/image/image-editing/index.js b/packages/block-library/src/image/image-editing/index.js
index 7a1ca8019a9115..7e5fac9b75cf01 100644
--- a/packages/block-library/src/image/image-editing/index.js
+++ b/packages/block-library/src/image/image-editing/index.js
@@ -20,7 +20,6 @@ export default function ImageEditor( {
 	clientWidth,
 	naturalHeight,
 	naturalWidth,
-	onClick,
 } ) {
 	return (
 		<>
@@ -31,7 +30,6 @@ export default function ImageEditor( {
 				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
-				onClick={ onClick }
 			/>
 			<BlockControls>
 				<ToolbarGroup>
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1bb1ecfc08062f..b06531a31f752a 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -211,7 +211,6 @@ export default function Image( {
 
 	function onImageClick() {
 		if ( captionFocused ) {
-			captionRef.current.blur();
 			setCaptionFocused( false );
 		}
 	}
@@ -455,7 +454,6 @@ export default function Image( {
 				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
-				onClick={ onImageClick }
 			/>
 		);
 	} else if ( ! isResizable || ! imageWidthWithinContainer ) {
@@ -542,6 +540,13 @@ export default function Image( {
 		);
 	}
 
+	function onCaptionBlur() {
+		if ( captionFocused ) {
+			captionRef.current.blur();
+			setCaptionFocused( false );
+		}
+	}
+
 	return (
 		<ImageEditingProvider
 			id={ id }
@@ -559,6 +564,7 @@ export default function Image( {
 			{ img }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
+					onBlur={ onCaptionBlur }
 					ref={ captionRef }
 					tagName="figcaption"
 					aria-label={ __( 'Image caption text' ) }