More robust way to focus on mount

WordPress · Nov 4, 2021 · 9910b2f · 9910b2f
1 parent a87a688
commit 9910b2f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 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
@@ -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
@@ -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
@@ -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>
 	);
 }