diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 70cbfe0f976af8..d1c44834aed528 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
### Internal
+- `CustomSelectControlV2`: prevent keyboard event propagation in legacy wrapper. ([#62907](https://github.com/WordPress/gutenberg/pull/62907))
- `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803))
- `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821))
- `CustomSelectControlV2`: fix trigger text alignment in RTL languages ([#62869](https://github.com/WordPress/gutenberg/pull/62869)).
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 d76fa8c0330516..c03e047c882e45 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { createContext, useMemo } from '@wordpress/element';
+import { createContext, useCallback, useMemo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
/**
@@ -14,6 +14,7 @@ import type {
CustomSelectStore,
CustomSelectButtonProps,
CustomSelectButtonSize,
+ _CustomSelectInternalProps,
_CustomSelectProps,
} from './types';
import type { WordPressComponentProps } from '../context';
@@ -80,7 +81,10 @@ const CustomSelectButton = ( {
};
function _CustomSelect(
- props: _CustomSelectProps & CustomSelectStore & CustomSelectButtonSize
+ props: _CustomSelectInternalProps &
+ _CustomSelectProps &
+ CustomSelectStore &
+ CustomSelectButtonSize
) {
const {
children,
@@ -89,9 +93,20 @@ function _CustomSelect(
size,
store,
className,
+ isLegacy = false,
...restProps
} = props;
+ const onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+ useCallback(
+ ( e ) => {
+ if ( isLegacy ) {
+ e.stopPropagation();
+ }
+ },
+ [ isLegacy ]
+ );
+
return (
// Where should `restProps` be forwarded to?
@@ -117,6 +132,7 @@ function _CustomSelect(
store={ store }
sameWidth
slide={ false }
+ onKeyDown={ onSelectPopoverKeyDown }
>
{ children }
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 209483775db9e4..242c264eafc67b 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -128,6 +128,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
'components-custom-select-control',
classNameProp
) }
+ isLegacy
{ ...restProps }
>
{ children }
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
index f0b699617cd03c..532b14d7bda526 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
@@ -454,8 +454,7 @@ describe.each( [
} );
describe( 'Keyboard behavior and accessibility', () => {
- // skip reason: legacy v2 doesn't currently implement this behavior
- it.skip( 'Captures the keypress event and does not let it propagate', async () => {
+ it( 'Captures the keypress event and does not let it propagate', async () => {
const onKeyDown = jest.fn();
render(
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index 3c192cfa56711f..c37db0690c5bc1 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -49,6 +49,15 @@ export type CustomSelectButtonProps = {
value?: string | string[];
};
+// Props only exposed on the internal implementation
+export type _CustomSelectInternalProps = {
+ /**
+ * True if the consumer is emulating the legacy component behavior and look
+ */
+ isLegacy?: boolean;
+};
+
+// Props that are exposed in exported components
export type _CustomSelectProps = CustomSelectButtonProps & {
/**
* Additional className added to the root wrapper element.
@@ -70,9 +79,7 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
label: string;
};
-export type CustomSelectProps = _CustomSelectProps &
- CustomSelectButtonProps &
- CustomSelectSize;
+export type CustomSelectProps = _CustomSelectProps & CustomSelectSize;
/**
* The legacy object structure for the options array.