Change how we focus search

WordPress · Oct 26, 2022 · d5182ed · d5182ed
1 parent 82a536b
commit d5182ed
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 64 deletions.
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,20 +11,17 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-function InserterLibrary(
-	{
-		rootClientId,
-		clientId,
-		isAppender,
-		showInserterHelpPanel,
-		showMostUsedBlocks = false,
-		__experimentalInsertionIndex,
-		__experimentalFilterValue,
-		onSelect = noop,
-		shouldFocusBlock = false,
-	},
-	ref
-) {
+function InserterLibrary( {
+	rootClientId,
+	clientId,
+	isAppender,
+	showInserterHelpPanel,
+	showMostUsedBlocks = false,
+	__experimentalInsertionIndex,
+	__experimentalFilterValue,
+	onSelect = noop,
+	shouldFocusBlock = false,
+} ) {
 	const { destinationRootClientId, prioritizePatterns } = useSelect(
 		( select ) => {
 			const { getBlockRootClientId, getSettings } =
@@ -54,9 +50,8 @@ function InserterLibrary(
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
 			prioritizePatterns={ prioritizePatterns }
-			ref={ ref }
 		/>
 	);
 }
 
-export default forwardRef( InserterLibrary );
+export default InserterLibrary;
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -7,12 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	forwardRef,
 	useState,
 	useCallback,
 	useMemo,
-	useImperativeHandle,
 	useRef,
+	useEffect,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -33,21 +32,18 @@ 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,
-		prioritizePatterns,
-	},
-	ref
-) {
+function InserterMenu( {
+	rootClientId,
+	clientId,
+	isAppender,
+	__experimentalInsertionIndex,
+	onSelect,
+	showInserterHelpPanel,
+	showMostUsedBlocks,
+	__experimentalFilterValue = '',
+	shouldFocusBlock = true,
+	prioritizePatterns,
+} ) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);
@@ -171,12 +167,9 @@ function InserterMenu(
 	);
 
 	const searchRef = useRef();
-	// TODO: this doesn't work now..
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			searchRef.current?.focus();
-		},
-	} ) );
+	useEffect( () => {
+		searchRef.current?.focus();
+	}, [ selectedTab ] );
 
 	const getCurrentTab = useCallback(
 		( tab ) => {
@@ -239,6 +232,7 @@ function InserterMenu(
 				</>
 			);
 		},
+		// TODO: check/add deps..
 		[ blocksTab, patternsTab, reusableBlocksTab, filterValue ]
 	);
 
@@ -263,9 +257,9 @@ function InserterMenu(
 						{ getCurrentTab }
 					</InserterTabs>
 				) }
-				{ ! filterValue && ! showAsTabs && (
+				{ ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
-						{ blocksTab }
+						{ getCurrentTab( { name: 'blocks' } ) }
 					</div>
 				) }
 			</div>
@@ -283,4 +277,4 @@ function InserterMenu(
 	);
 }
 
-export default forwardRef( InserterMenu );
+export default 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
@@ -10,7 +10,6 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,11 +34,6 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
 	return (
 		<div
 			ref={ inserterDialogRef }
@@ -63,7 +57,6 @@ 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
@@ -10,7 +10,6 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,11 +30,6 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
 	return (
 		<div
 			ref={ inserterDialogRef }
@@ -58,7 +52,6 @@ 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
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -34,11 +34,6 @@ export default function InserterSidebar() {
 		focusOnMount: null,
 	} );
 
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
 	return (
 		<div
 			ref={ inserterDialogRef }
@@ -58,7 +53,6 @@ export default function InserterSidebar() {
 					shouldFocusBlock={ isMobileViewport }
 					rootClientId={ rootClientId }
 					__experimentalInsertionIndex={ insertionIndex }
-					ref={ libraryRef }
 				/>
 			</div>
 		</div>