CustomSelectControl V2: stop keyboard propagation when legacy (WordPr…

…ess#62907) * Add `isLegacy` prop to internal implementation * Stop keyboard event propagation for legacy V2 * Enable skipped test for V2 legacy * Add comment * CHANGELOG * Fix types --- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
petitphp · Jul 1, 2024 · 0097372 · 0097372
1 parent 872f8b3
commit 0097372
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,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
@@ -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?
 		<div className={ className }>
@@ -117,6 +132,7 @@ function _CustomSelect(
 					store={ store }
 					sameWidth
 					slide={ false }
+					onKeyDown={ onSelectPopoverKeyDown }
 				>
 					<CustomSelectContext.Provider value={ { store } }>
 						{ 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
@@ -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
@@ -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
@@ -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.