diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx index e959ca33a8251..5861728e51750 100644 --- 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 ) } >
{ computedRenderSelectedValue( currentValue ) }
@@ -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 } ) } - - + + { children } diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx index b2e6e5913cb48..9fe86e3329a1b 100644 --- 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 index 93ca054636169..1c92fa0d6e5f0 100644 --- 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; };