Try possibly better method for Block Inserter Search focus (#37793)

* Try useImperativeHandle. * Pass the prop to focus. * Implement reviewer feedback. * More reviewer feedback. Apply to edit-site/edit-widgets.
WordPress · Jan 11, 2022 · 906f86e · 906f86e
1 parent 8debd02
commit 906f86e
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -7,24 +7,28 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
-function InserterLibrary( {
-	rootClientId,
-	clientId,
-	isAppender,
-	showInserterHelpPanel,
-	showMostUsedBlocks = false,
-	__experimentalInsertionIndex,
-	__experimentalFilterValue,
-	onSelect = noop,
-	shouldFocusBlock = false,
-} ) {
+function InserterLibrary(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		showInserterHelpPanel,
+		showMostUsedBlocks = false,
+		__experimentalInsertionIndex,
+		__experimentalFilterValue,
+		onSelect = noop,
+		shouldFocusBlock = false,
+	},
+	ref
+) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -47,8 +51,9 @@ function InserterLibrary( {
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
+			ref={ ref }
 		/>
 	);
 }
 
-export default InserterLibrary;
+export default forwardRef( InserterLibrary );
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useCallback,
+	useMemo,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -19,17 +26,20 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu( {
-	rootClientId,
-	clientId,
-	isAppender,
-	__experimentalInsertionIndex,
-	onSelect,
-	showInserterHelpPanel,
-	showMostUsedBlocks,
-	__experimentalFilterValue = '',
-	shouldFocusBlock = true,
-} ) {
+function InserterMenu(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		__experimentalInsertionIndex,
+		onSelect,
+		showInserterHelpPanel,
+		showMostUsedBlocks,
+		__experimentalFilterValue = '',
+		shouldFocusBlock = true,
+	},
+	ref
+) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);
@@ -168,6 +178,13 @@ function InserterMenu( {
 		[ blocksTab, patternsTab, reusableBlocksTab ]
 	);
 
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			searchRef.current.focus();
+		},
+	} ) );
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
@@ -182,6 +199,7 @@ function InserterMenu( {
 						value={ filterValue }
 						label={ __( 'Search for blocks and patterns' ) }
 						placeholder={ __( 'Search' ) }
+						ref={ searchRef }
 					/>
 					{ !! filterValue && (
 						<InserterSearchResults
@@ -219,4 +237,4 @@ function InserterMenu( {
 	);
 }
 
-export default InserterMenu;
+export default forwardRef( InserterMenu );
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -36,11 +36,9 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const inserterContentRef = useRef();
+	const libraryRef = useRef();
 	useEffect( () => {
-		inserterContentRef.current
-			.querySelector( '.block-editor-inserter__search input' )
-			.focus();
+		libraryRef.current.focusSearch();
 	}, [] );
 
 	return (
@@ -56,10 +54,7 @@ export default function InserterSidebar() {
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
 			</TagName>
-			<div
-				className="edit-post-editor__inserter-panel-content"
-				ref={ inserterContentRef }
-			>
+			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
@@ -69,6 +64,7 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>

diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -31,11 +31,9 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const inserterContentRef = useRef();
+	const libraryRef = useRef();
 	useEffect( () => {
-		inserterContentRef.current
-			.querySelector( '.block-editor-inserter__search input' )
-			.focus();
+		libraryRef.current.focusSearch();
 	}, [] );
 
 	return (
@@ -51,10 +49,7 @@ export default function InserterSidebar() {
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
 			</TagName>
-			<div
-				className="edit-post-editor__inserter-panel-content"
-				ref={ inserterContentRef }
-			>
+			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobile }
@@ -63,6 +58,7 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>

diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -34,11 +34,9 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const inserterContentRef = useRef();
+	const libraryRef = useRef();
 	useEffect( () => {
-		inserterContentRef.current
-			.querySelector( '.block-editor-inserter__search input' )
-			.focus();
+		libraryRef.current.focusSearch();
 	}, [] );
 
 	return (
@@ -54,15 +52,13 @@ export default function InserterSidebar() {
 					label={ __( 'Close block inserter' ) }
 				/>
 			</TagName>
-			<div
-				className="edit-widgets-layout__inserter-panel-content"
-				ref={ inserterContentRef }
-			>
+			<div className="edit-widgets-layout__inserter-panel-content">
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }
 					rootClientId={ rootClientId }
 					__experimentalInsertionIndex={ insertionIndex }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>