Try fixing auto focus

WordPress · Nov 1, 2021 · 829d041 · 829d041
1 parent 0ebc1d9
commit 829d041
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 15 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
@@ -79,23 +79,38 @@ export function useFocusFirstElement( clientId ) {
 			return;
 		}
 
-		// Find all tabbables within node.
-		const textInputs = focus.tabbable
-			.find( ref.current )
-			.filter( ( node ) => isTextField( node ) );
+		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;
-		const target =
-			( isReverse ? last : first )( textInputs ) || ref.current;
+
+		// Find all text fields or placeholders within the block.
+		candidates = focus.tabbable
+			.find( target )
+			.filter( ( node ) => isTextField( node ) || node.shadowRoot );
+
+		target = ( isReverse ? last : first )( candidates ) || target;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
 			ref.current.focus();
 			return;
 		}
 
-		placeCaretAtHorizontalEdge( target, isReverse );
+		if ( target.shadowRoot ) {
+			// We must wait for the placeholder content to load.
+			setTimeout( () => {
+				// Find all text fields within the placeholder.
+				candidates = focus.tabbable
+					.find( target.shadowRoot )
+					.filter( ( node ) => isTextField( node ) );
+				target = ( isReverse ? last : first )( candidates ) || target;
+				placeCaretAtHorizontalEdge( target, isReverse );
+			} );
+		} else {
+			placeCaretAtHorizontalEdge( target, isReverse );
+		}
 	}, [ initialPosition ] );
 
 	return ref;

diff --git a/packages/block-editor/src/components/embedded-admin-context/index.js b/packages/block-editor/src/components/embedded-admin-context/index.js
@@ -79,6 +79,12 @@ export default function EmbeddedAdminContext( props ) {
 			clearTimeout( timeoutId );
 		};
 	}, [] );
+	const content = (
+		<StyleProvider document={ { head: shadow } }>
+			{ props.children }
+		</StyleProvider>
+	);
+
 	return (
 		<div
 			{ ...props }
@@ -87,13 +93,7 @@ export default function EmbeddedAdminContext( props ) {
 			role="button"
 			aria-pressed={ hasFocus }
 		>
-			{ shadow &&
-				createPortal(
-					<StyleProvider document={ { head: shadow } }>
-						{ props.children }
-					</StyleProvider>,
-					shadow
-				) }
+			{ shadow && createPortal( content, shadow ) }
 		</div>
 	);
 }
diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js
@@ -148,7 +148,8 @@ function filterTabbable( focusables ) {
 }
 
 /**
- * @param {Element} context
+ * @param {Element|Document|ShadowRoot} context
+ *
  * @return {Element[]} Tabbable elements within the context.
  */
 export function find( context ) {

diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js
@@ -167,6 +167,12 @@ async function insertEmbed( URL ) {
 		`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Embed')]`
 	);
 	await page.keyboard.press( 'Enter' );
+	await page.evaluate(
+		() =>
+			new Promise( ( resolve ) => {
+				setTimeout( resolve );
+			} )
+	);
 	await page.keyboard.type( URL );
 	await page.keyboard.press( 'Enter' );
 }