keep the imperative ref and focus once the tabs are done

WordPress · May 1, 2024 · cf0e71c · cf0e71c
1 parent d6caacb
commit cf0e71c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -12,11 +12,12 @@ import {
 	useCallback,
 	useMemo,
 	useRef,
+	useImperativeHandle,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useDebouncedInput, useRefEffect } from '@wordpress/compose';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -237,13 +238,12 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
-	const hasAutoFocused = useRef( false );
-	const searchRef = useRefEffect( ( element ) => {
-		if ( element && hasAutoFocused.current === false ) {
-			hasAutoFocused.current = true;
-			window.requestAnimationFrame( () => element.focus() );
-		}
-	}, [] );
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			window.requestAnimationFrame( () => searchRef.current.focus() );
+		},
+	} ) );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {

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, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -35,6 +35,9 @@ export default function InserterSidebar() {
 	} );
 
 	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
 
 	return (
 		<div

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
@@ -10,7 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -41,6 +41,9 @@ export default function InserterSidebar( {
 	} );
 
 	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
 
 	return (
 		<div