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;
};