SearchableChipSelect: Preserve selected chips on Escape

packages/ui/CHANGELOG.md

@@ -39,6 +39,8 @@
 
 ### Bug Fixes
 
+-   `SearchableChipSelect`, `SearchableChipSelectControl`: Preserve selected chips when pressing Escape in an empty search field ([#84172](https://github.com/WordPress/gutenberg/pull/84172)).
+
 -   `VisuallyHidden`: Move hiding styles outside CSS cascade layers to prevent overrides by global element styles ([#84114](https://github.com/WordPress/gutenberg/pull/84114)).
 -   `Combobox.Root`: Preserve separate item and selected-value types for collections, including filtering callbacks ([#84094](https://github.com/WordPress/gutenberg/pull/84094)).
 -   `Autocomplete.Root`: Preserve item type inference in filtering, formatting, and highlight callbacks for flat and grouped items ([#84095](https://github.com/WordPress/gutenberg/pull/84095)).

packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx

@@ -52,6 +52,7 @@ export const SearchableChipSelect = forwardRef<
 		emptyContent = __( 'No results found.' ),
 		statusContent,
 		items,
+		onValueChange,
 		chipsContent,
 		searchPlaceholder = __( 'Search' ),
 		popupWidth,
@@ -74,6 +75,13 @@ export const SearchableChipSelect = forwardRef<
 			multiple
 			disabled={ disabled }
 			{ ...restProps }
+			onValueChange={ ( value, eventDetails ) => {
+				if ( eventDetails.reason === 'escape-key' ) {
+					eventDetails.cancel();
+					return;
+				}
+				onValueChange?.( value, eventDetails );
+			} }
 			readOnly={ undefined }
 		>
 			<Combobox.InputGroup>

packages/ui/src/form/primitives/searchable-chip-select/test/index.browser.test.tsx

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, screen, waitFor, within } from '@testing-library/react';
 import { render } from 'vitest-browser-react';
 import { userEvent } from 'vitest/browser';
-import { createRef } from '@wordpress/element';
+import { createRef, useState } from '@wordpress/element';
 import warning from '@wordpress/warning';
 import type { Item, ItemGroup } from '../types';
 import { SearchableChipSelect } from '../index';
@@ -17,6 +17,53 @@ describe( 'SearchableChipSelect', () => {
 		mockedWarning.mockClear();
 	} );
 
+	it.each( [ 'controlled', 'uncontrolled' ] )(
+		'preserves selected chips when Escape is pressed with an empty search field (%s)',
+		async ( mode ) => {
+			const selectedItems = [ ITEMS[ 0 ], ITEMS[ 1 ] ];
+			const onValueChange = vi.fn();
+
+			function Example() {
+				const [ value, setValue ] = useState( selectedItems );
+
+				return (
+					<SearchableChipSelect
+						aria-label="Fruit"
+						items={ ITEMS }
+						{ ...( mode === 'controlled'
+							? { value }
+							: { defaultValue: selectedItems } ) }
+						onValueChange={ ( nextValue, eventDetails ) => {
+							onValueChange( nextValue, eventDetails );
+							setValue( nextValue );
+						} }
+					/>
+				);
+			}
+
+			await render( <Example /> );
+
+			const input = screen.getByRole( 'combobox', { name: 'Fruit' } );
+			await userEvent.click( input );
+			await expect.element( screen.getByRole( 'listbox' ) ).toBeVisible();
+			expect( input ).toHaveValue( '' );
+
+			await userEvent.keyboard( '{Escape}' );
+			await waitFor( () => {
+				expect(
+					screen.queryByRole( 'listbox', { hidden: true } )
+				).not.toBeInTheDocument();
+			} );
+			await userEvent.keyboard( '{Escape}' );
+
+			const chips = within( screen.getByRole( 'toolbar' ) );
+			expect( chips.getByText( 'Apple' ) ).toBeVisible();
+			expect( chips.getByText( 'Apricot' ) ).toBeVisible();
+			expect( input ).toHaveFocus();
+			expect( onValueChange ).not.toHaveBeenCalled();
+		}
+	);
+
 	it( 'describes default items without adding the description to a chip', async () => {
 		await render(
 			<SearchableChipSelect