Stop keypresses being caught by other elements when they happen in a CustomSelectControl

[opr]

Description

In the <ul> output by CustomSelectControl I have added a function to handle onKeyDown - this stops the event from propagating, but still calls the onKeyDown handler (which is derived ultimately from downshift).

This PR fixes #30204.

How has this been tested?

In the linked issue (#30204) the reproducible steps can also be used to test:

1. Open the storybook for this project: npm run storybook:dev
2. Go to the CustomSelectControl > Default component, click it and start typing s to get to the entry Small
3. Notice the storybook sidebar no longer closes due to the s keypress being cancelled.

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards. Unsure, I had to add eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions but I don't see any other way of capturing this event
• I've tested my changes with keyboard and screen readers.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @opr! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[opr]

Hi folks - coming in with an update to provide context. Here's a real-world example of what this PR aims to solve, when a user has a WordPress site, connected via Jetpack, there is a sidebar that can be opened by pressing N.

When a customer is using WooCommerce Blocks, there are input fields for Country/State that use CustomSelectControl.

If the user tries to type into these boxes, for example 'United Kingdom', then the N key is hit, causing the sidebar to open.

here's a video to show it happening (note the inputs given while the select box is focused are u -> n and the sidebar appears on the right-hand side immediately after n.)

https://www.loom.com/share/2dbe6a589c4541599438782d066151a7

[ntsekouras]

Thanks for working on this @opr !

After reading a bit more the issue in downshift and related discussions there, this approach seems to be the suggested workaround. I'm wondering though why even with this code, the Escape still propagated.

I inserted a CustomSelectControl in a Modal here, after the TextControl
-- demo snippet:

<CustomSelectControl
	label="Font Size"
	options={ [
		{
			key: 'small',
			name: 'Small',
			style: { fontSize: '50%' },
		},
		{
			key: 'normal',
			name: 'Normal',
			style: { fontSize: '100%' },
		},
	] }
/>

Then:

1. insert a Template Part and click New template part
2. open the select control
3. press Escape

I would expect the Modal to stay open and only the select to close, but this is not happening..

[opr]

Thanks @ntsekouras I've made a change to stop the synthetic event propagating and it has solved the issue you mentioned in your review.

[ciampo]

Hey @opr , thank you for working on this fix!

I've added a couple of inline comments. On top of that, I've got two additional suggestions:

• Could you add a new entry to the CHANGELOG ?
• Could you add a unit test for this fix?

Thank you!

[opr]

Hey @ciampo thanks for the review and sorry for the delay! All done and ready for a re-review :)

[ciampo]

Hey @opr , thank you for addressing the initial round of feedback!

I've left some additional feedback to align the unit tests with the most common practices used in the components package.

[ciampo]

Thank you @opr for swiftly addressing the feedback! Code changes LGTM 🚀

The e2e test failures don't seem related, maybe rebasing would solve them?

[opr]

Thank you @opr for swiftly addressing the feedback! Code changes LGTM 🚀

The e2e test failures don't seem related, maybe rebasing would solve them?

Rebasing worked, thanks @ciampo