Call onFilterValueChange on blur if no value is selected

WordPress · Sep 12, 2024 · 4455012 · 4455012
1 parent 0423a7e
commit 4455012
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
@@ -234,6 +234,11 @@ function ComboboxControl( props: ComboboxControlProps ) {
 
 	const onBlur = () => {
 		setInputHasFocus( false );
+
+		if ( ! currentOption ) {
+			onFilterValueChange( '' );
+			setInputValue( '' );
+		}
 	};
 
 	const onFocus = () => {

diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
@@ -188,7 +188,7 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
-	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
+	it( 'does not call onFilterValueChange on focus', async () => {
 		const user = userEvent.setup();
 		const onChangeSpy = jest.fn();
 		render(
@@ -202,12 +202,51 @@ describe.each( [
 
 		await user.click( input );
 		expect( onChangeSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
+		const user = userEvent.setup();
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onChangeSpy }
+			/>
+		);
+
+		const input = getInput( defaultLabelText );
 
 		await user.type( input, 'a' );
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'a' );
 	} );
 
+	it( 'clears the textbox value if there is no selected value on blur', async () => {
+		const user = userEvent.setup();
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( input ).toHaveValue( 'a' );
+
+		onChangeSpy.mockReset();
+
+		// Clicking document.body to trigger a blur event on the input.
+		await user.click( document.body );
+
+		expect( input ).toHaveValue( '' );
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '' );
+	} );
+
 	it( 'should select the correct option from a search', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];