ControlWithError: Show validating state when transitioning from error state

packages/components/CHANGELOG.md

@@ -13,6 +13,7 @@
 ### Internal
 
 -   Validated form controls: Add support for async validation. This is a breaking API change that splits the `customValidator` prop into an `onValidate` callback and a `customValidity` object. ([#71184](https://github.com/WordPress/gutenberg/pull/71184)).
+-   Validated form controls: Fix bug where "validating" state was not shown when transitioning from error state ([#71260](https://github.com/WordPress/gutenberg/pull/71260)).
 -   `DateCalendar`, `DateRangeCalendar`: use `px` instead of `rem` units. ([#71248](https://github.com/WordPress/gutenberg/pull/71248)).
 
 ## 30.1.0 (2025-08-07)

packages/components/src/validated-form-controls/control-with-error.tsx

@@ -134,6 +134,9 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 			case 'validating': {
 				// Wait before showing a validating state.
 				const timer = setTimeout( () => {
+					validityTarget?.setCustomValidity( '' );
+					setErrorMessage( validityTarget?.validationMessage );
+
 					setStatusMessage( {
 						type: 'validating',
 						message: customValidity.message,

packages/components/src/validated-form-controls/test/control-with-error.tsx

@@ -0,0 +1,184 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '../components';
+
+describe( 'ControlWithError', () => {
+	describe( 'Async Validation', () => {
+		beforeEach( () => {
+			jest.useFakeTimers();
+		} );
+
+		afterEach( () => {
+			jest.useRealTimers();
+		} );
+
+		const AsyncValidatedInputControl = ( {
+			serverDelayMs,
+		}: {
+			serverDelayMs: number;
+		} ) => {
+			const [ text, setText ] = useState( '' );
+			const [ customValidity, setCustomValidity ] =
+				useState<
+					React.ComponentProps<
+						typeof ValidatedInputControl
+					>[ 'customValidity' ]
+				>( undefined );
+
+			const onValidate = useCallback(
+				( value?: string ) => {
+					setCustomValidity( {
+						type: 'validating',
+						message: 'Validating...',
+					} );
+
+					// Simulate delayed server response
+					setTimeout( () => {
+						if ( value?.toLowerCase() === 'error' ) {
+							setCustomValidity( {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+							} );
+						} else {
+							setCustomValidity( {
+								type: 'valid',
+								message: 'Validated',
+							} );
+						}
+					}, serverDelayMs );
+				},
+				[ serverDelayMs ]
+			);
+
+			return (
+				<ValidatedInputControl
+					label="Text"
+					value={ text }
+					onChange={ ( newValue ) => {
+						setText( newValue ?? '' );
+					} }
+					onValidate={ onValidate }
+					customValidity={ customValidity }
+				/>
+			);
+		};
+
+		it( 'should not show "validating" state if it takes less than 1000ms', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render( <AsyncValidatedInputControl serverDelayMs={ 500 } /> );
+
+			const input = screen.getByRole( 'textbox' );
+
+			await user.type( input, 'valid text' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			// Fast-forward to right before the server response
+			act( () => jest.advanceTimersByTime( 499 ) );
+
+			// The validating state should not be shown
+			await waitFor( () => {
+				expect(
+					screen.queryByText( 'Validating...' )
+				).not.toBeInTheDocument();
+			} );
+
+			// Fast-forward past the server delay to show validation result
+			act( () => jest.advanceTimersByTime( 1 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeInTheDocument();
+			} );
+		} );
+
+		it( 'should show "validating" state if it takes more than 1000ms', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render( <AsyncValidatedInputControl serverDelayMs={ 1200 } /> );
+
+			const input = screen.getByRole( 'textbox' );
+
+			await user.type( input, 'valid text' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			// Initially, no validating message should be shown (before 1s delay)
+			expect(
+				screen.queryByText( 'Validating...' )
+			).not.toBeInTheDocument();
+
+			// Fast-forward past the 1s delay to show validating state
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'Validating...' )
+				).toBeInTheDocument();
+			} );
+
+			// Fast-forward past the server delay to show validation result
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeInTheDocument();
+			} );
+
+			// Test error case
+			await user.clear( input );
+			await user.type( input, 'error' );
+
+			// Blur to trigger validation
+			await user.tab();
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'Validating...' )
+				).toBeInTheDocument();
+			} );
+
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'The word "error" is not allowed.' )
+				).toBeInTheDocument();
+			} );
+
+			// Test editing after error
+			await user.type( input, '{backspace}' );
+
+			act( () => jest.advanceTimersByTime( 1000 ) );
+
+			await waitFor( () => {
+				expect(
+					screen.getByText( 'Validating...' )
+				).toBeInTheDocument();
+			} );
+
+			act( () => jest.advanceTimersByTime( 200 ) );
+
+			await waitFor( () => {
+				expect( screen.getByText( 'Validated' ) ).toBeInTheDocument();
+			} );
+		} );
+	} );
+} );