Add search focus to inserter menu

WordPress · Apr 23, 2021 · cadfaa6 · cadfaa6
1 parent f2e0c79
commit cadfaa6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableHighlight } from 'react-native';
+import { LayoutAnimation, TouchableHighlight } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -32,6 +32,7 @@ function InserterMenu( {
 	insertionIndex,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
+	const [ searchFocus, setSearchFocus ] = useState( false );
 	// eslint-disable-next-line no-undef
 	const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ );
 	const [ tabIndex, setTabIndex ] = useState( 0 );
@@ -145,6 +146,16 @@ function InserterMenu( {
 		[ onInsert, onSelect ]
 	);
 
+	const onFocusSearch = useCallback(
+		( focus ) => {
+			LayoutAnimation.configureNext(
+				LayoutAnimation.Presets.easeInEaseOut
+			);
+			setSearchFocus( focus );
+		},
+		[ setSearchFocus ]
+	);
+
 	return (
 		<BottomSheet
 			isVisible={ true }
@@ -156,10 +167,11 @@ function InserterMenu( {
 							onChange={ ( value ) => {
 								setFilterValue( value );
 							} }
+							onFocus={ onFocusSearch }
 							value={ filterValue }
 						/>
 					) }
-					{ ! filterValue && hasReusableBlocks && (
+					{ ! searchFocus && ! filterValue && hasReusableBlocks && (
 						<InserterTabs.Control onChangeTab={ setTabIndex } />
 					) }
 				</>

diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js
@@ -6,7 +6,7 @@ import { TextInput, View, TouchableHighlight } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, useCallback } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
@@ -22,7 +22,12 @@ import {
  */
 import styles from './style.scss';
 
-function InserterSearchForm( { value, onChange, onLayout = () => {} } ) {
+function InserterSearchForm( {
+	value,
+	onChange,
+	onFocus,
+	onLayout = () => {},
+} ) {
 	const [ isActive, setIsActive ] = useState( false );
 
 	const inputRef = useRef();
@@ -42,6 +47,16 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) {
 		styles.searchFormPlaceholderDark
 	);
 
+	const onActive = useCallback(
+		( active ) => {
+			if ( onFocus ) {
+				onFocus( active );
+			}
+			setIsActive( active );
+		},
+		[ onFocus, setIsActive ]
+	);
+
 	return (
 		<TouchableHighlight accessible={ false } onLayout={ onLayout }>
 			<View style={ searchFormStyle }>
@@ -52,7 +67,7 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) {
 						onClick={ () => {
 							inputRef.current.blur();
 							onChange( '' );
-							setIsActive( false );
+							onActive( false );
 						} }
 					/>
 				) : (
@@ -61,7 +76,7 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) {
 						icon={ searchIcon }
 						onClick={ () => {
 							inputRef.current.focus();
-							setIsActive( true );
+							onActive( true );
 						} }
 					/>
 				) }
@@ -70,7 +85,7 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) {
 					style={ searchFormInputStyle }
 					placeholderTextColor={ placeholderStyle.color }
 					onChangeText={ onChange }
-					onFocus={ () => setIsActive( true ) }
+					onFocus={ () => onActive( true ) }
 					value={ value }
 					placeholder={ __( 'Search blocks' ) }
 				/>