Iframe: adjust keydown event bubbling

WordPress · Sep 18, 2023 · fa14cd6 · fa14cd6
1 parent 62c1f50
commit fa14cd6
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -237,6 +237,7 @@ function Iframe( {
 	return (
 		<>
 			{ tabIndex >= 0 && before }
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
 				style={ {
@@ -264,6 +265,25 @@ function Iframe( {
 				// content.
 				src={ src }
 				title={ __( 'Editor canvas' ) }
+				onKeyDown={ ( event ) => {
+					// If the event originates from inside the iframe, it means
+					// it bubbled through the portal, but only with React
+					// events. We need to to bubble native events as well,
+					// though by doing so we also trigger another React event,
+					// so we need to stop the propagation of this event to avoid
+					// duplication.
+					if (
+						event.currentTarget.ownerDocument !==
+						event.target.ownerDocument
+					) {
+						event.stopPropagation();
+						bubbleEvent(
+							event,
+							window.KeyboardEvent,
+							event.currentTarget
+						);
+					}
+				} }
 			>
 				{ iframeDocument &&
 					createPortal(
@@ -277,18 +297,6 @@ function Iframe( {
 								'editor-styles-wrapper',
 								...bodyClasses
 							) }
-							onKeyDown={ ( event ) => {
-								// This stopPropagation call ensures React doesn't create a syncthetic event to bubble this event
-								// which would result in two React events being bubbled throught the iframe.
-								event.stopPropagation();
-								const { defaultView } = iframeDocument;
-								const { frameElement } = defaultView;
-								bubbleEvent(
-									event,
-									window.KeyboardEvent,
-									frameElement
-								);
-							} }
 						>
 							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>