From fa14cd6b80cf20288851939accaa96f6eafde977 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Mon, 18 Sep 2023 18:48:14 +0300
Subject: [PATCH] Iframe: adjust keydown event bubbling

---
 .../src/components/iframe/index.js            | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 9d8b1e9490a006..9a6371dcaf4256 100644
--- 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 }>