From 9910b2fe16c1a9f9fcdab2c4d0ea397b6f6aa24d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Thu, 4 Nov 2021 12:53:58 +0200
Subject: [PATCH] More robust way to focus on mount

---
 .../use-focus-first-element.js                | 17 +------------
 .../embedded-admin-context/index.js           | 24 +++++++++++++++++--
 .../src/components/placeholder/index.js       |  7 +-----
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
index 89f9a85b365db0..7095bd7e2dbc87 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -81,14 +81,13 @@ export function useFocusFirstElement( clientId ) {
 		}
 
 		let target = ref.current;
-		let candidates;
 
 		// If reversed (e.g. merge via backspace), use the last in the set of
 		// tabbables.
 		const isReverse = -1 === initialPosition;
 
 		// Find all text fields or placeholders within the block.
-		candidates = focus.tabbable
+		const candidates = focus.tabbable
 			.find( target )
 			.filter(
 				( node ) =>
@@ -106,20 +105,6 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
-		if ( target.shadowRoot ) {
-			target.focus();
-
-			// We must wait for the placeholder content to load.
-			const timeoutId = setTimeout( () => {
-				// Find all text fields within the placeholder.
-				candidates = focus.tabbable.find( target.shadowRoot );
-				target = ( isReverse ? last : first )( candidates ) || target;
-				placeCaretAtHorizontalEdge( target, isReverse );
-			} );
-
-			return () => clearTimeout( timeoutId );
-		}
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition ] );
 
diff --git a/packages/block-editor/src/components/embedded-admin-context/index.js b/packages/block-editor/src/components/embedded-admin-context/index.js
index 303858ccd27507..3db90e1b45c72f 100644
--- a/packages/block-editor/src/components/embedded-admin-context/index.js
+++ b/packages/block-editor/src/components/embedded-admin-context/index.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
+import {
+	useRefEffect,
+	useConstrainedTabbing,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { useState, createPortal } from '@wordpress/element';
 import { ENTER, SPACE, ESCAPE } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
@@ -117,9 +121,25 @@ export default function EmbeddedAdminContext( props ) {
 			clearTimeout( timeoutId );
 		};
 	}, [] );
+
+	const dialogRef = useRefEffect( ( element ) => {
+		if (
+			element.getRootNode().host !== element.ownerDocument.activeElement
+		)
+			return;
+
+		const [ firstTabbable ] = focus.tabbable.find( element );
+		if ( firstTabbable ) firstTabbable.focus();
+	}, [] );
+
 	const content = (
 		<StyleProvider document={ { head: shadow } }>
-			{ props.children }
+			<div
+				role="dialog"
+				ref={ useMergeRefs( [ useConstrainedTabbing(), dialogRef ] ) }
+			>
+				{ props.children }
+			</div>
 		</StyleProvider>
 	);
 
diff --git a/packages/block-editor/src/components/placeholder/index.js b/packages/block-editor/src/components/placeholder/index.js
index 8d83724eb0eb6c..da0f1a24c0f10b 100644
--- a/packages/block-editor/src/components/placeholder/index.js
+++ b/packages/block-editor/src/components/placeholder/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useConstrainedTabbing } from '@wordpress/compose';
 import { Placeholder } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -28,11 +27,7 @@ export default function IsolatedPlaceholder( props ) {
 			) }
 			className="wp-block-editor-placeholder"
 		>
-			<Placeholder
-				{ ...props }
-				role="dialog"
-				ref={ useConstrainedTabbing() }
-			/>
+			<Placeholder { ...props } />
 		</EmbeddedAdminContext>
 	);
 }