Stop keypresses being caught by other elements when they happen in a CustomSelectControl (#30557)

* Stop the keydown event from propagating in CustomSelect component

* Stop the synthetic event propagating instead of native

This stops other listeners receiving this event, whereas stopping the native event still somehow allowed propagation.

* Move keyDown handler into useCallback and use optional chaining

* Add unit tests for CustomSelectControl

* Update changelog

* Add inline comment about role and remove unneeded class name

* Move mocked function into test

* Add correct spacing to changelog

* Add options as an array of key value pairs

* Use accessible roles instead of looking for elements by className

Author: opr

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   Prevent keyDown events from propagating up in `CustomSelectControl` ([#30557](https://github.com/WordPress/gutenberg/pull/30557))
+
 ## 19.2.0 (2022-01-04)
 
 ### Experimental

packages/components/src/custom-select-control/index.js

@@ -9,6 +9,8 @@ import classnames from 'classnames';
  */
 import { Icon, check, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -98,6 +100,15 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
+
+	const onKeyDownHandler = useCallback(
+		( e ) => {
+			e.stopPropagation();
+			menuProps?.onKeyDown?.( e );
+		},
+		[ menuProps ]
+	);
+
 	// We need this here, because the null active descendant is not fully ARIA compliant.
 	if (
 		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
@@ -141,7 +152,8 @@ export default function CustomSelectControl( {
 					className="components-custom-select-control__button-icon"
 				/>
 			</Button>
-			<ul { ...menuProps }>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&
 					items.map( ( item, index ) => (
 						// eslint-disable-next-line react/jsx-key

packages/components/src/custom-select-control/test/index.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { CustomSelectControl } from '@wordpress/components';
+
+describe( 'CustomSelectControl', () => {
+	it( 'Captures the keypress event and does not let it propagate', () => {
+		const onKeyDown = jest.fn();
+		const options = [
+			{
+				key: 'one',
+				name: 'Option one',
+			},
+			{
+				key: 'two',
+				name: 'Option two',
+			},
+			{
+				key: 'three',
+				name: 'Option three',
+			},
+		];
+
+		render(
+			<div
+				// This role="none" is required to prevent an eslint warning about accessibility.
+				role="none"
+				onKeyDown={ onKeyDown }
+			>
+				<CustomSelectControl options={ options } />
+			</div>
+		);
+		const toggleButton = screen.getByRole( 'button' );
+		fireEvent.click( toggleButton );
+
+		const customSelect = screen.getByRole( 'listbox' );
+		fireEvent.keyDown( customSelect );
+
+		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+	} );
+} );