Remove unmountOnHide and related logic for first iteration

WordPress · Feb 5, 2024 · 6baa642 · 6baa642
1 parent 5f7e5cf
commit 6baa642
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 38 deletions.
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useEffect,
-	useMemo,
-	useState,
-} from '@wordpress/element';
+import { createContext, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown } from '@wordpress/icons';
 
@@ -63,7 +58,6 @@ const UnconnectedCustomSelectButton = (
 ) => {
 	const {
 		renderSelectedValue,
-		setUnmountOnHide,
 		size = 'default',
 		store,
 		...restProps
@@ -82,12 +76,9 @@ const UnconnectedCustomSelectButton = (
 			size={ size }
 			hasCustomRenderProp={ !! renderSelectedValue }
 			store={ store }
-			moveOnKeyDown
+			// to match legacy behavior where using arrow keys
+			// move selection rather than open the popover
 			showOnKeyDown={ false }
-			// mount component onFocus to keep selection on keydown behavior
-			// see https://github.com/WordPress/gutenberg/pull/57902#discussion_r1473087447
-			onFocus={ () => setUnmountOnHide?.( false ) }
-			onBlur={ () => setUnmountOnHide?.( true ) }
 		>
 			<div>{ computedRenderSelectedValue( currentValue ) }</div>
 			<Icon icon={ chevronDown } size={ 18 } />
@@ -109,12 +100,6 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 		...restProps
 	} = props;
 
-	const [ unmountOnHide, setUnmountOnHide ] = useState( false );
-
-	useEffect( () => {
-		setUnmountOnHide( true );
-	}, [] );
-
 	return (
 		<>
 			{ hideLabelFromVision ? (
@@ -124,17 +109,8 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 					{ label }
 				</Styled.CustomSelectLabel>
 			) }
-			<CustomSelectButton
-				{ ...restProps }
-				setUnmountOnHide={ setUnmountOnHide }
-				store={ store }
-			/>
-			<Styled.CustomSelectPopover
-				gutter={ 12 }
-				store={ store }
-				sameWidth
-				unmountOnHide={ unmountOnHide }
-			>
+			<CustomSelectButton { ...restProps } store={ store } />
+			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
 				<CustomSelectContext.Provider value={ { store } }>
 					{ children }
 				</CustomSelectContext.Provider>

diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx
@@ -228,7 +228,11 @@ describe.each( [
 			/>
 		);
 
-		expect( screen.getByText( /hint/i ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveTextContent( /hint/i );
 	} );
 
 	it( 'shows selected hint in list of options when added', async () => {

diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
@@ -40,10 +40,6 @@ export type CustomSelectButtonProps = {
 	 * Can be used to externally control the value of the control.
 	 */
 	value?: string | string[];
-	/**
-	 * To control mounting and unmounting the popover.
-	 */
-	setUnmountOnHide?: React.Dispatch< React.SetStateAction< boolean > >;
 };
 
 export type _CustomSelectProps = {
@@ -64,10 +60,7 @@ export type _CustomSelectProps = {
 };
 
 export type CustomSelectProps = _CustomSelectProps &
-	Exclude<
-		CustomSelectButtonProps,
-		{ size: 'small' } | 'setUnmountOnHide'
-	> & {
+	Exclude< CustomSelectButtonProps, { size: 'small' } > & {
 		options?: never;
 	};