@wordpress/components 30.9.0 → 31.0.0

package/src/validated-form-controls/components/toggle-control.tsx

@@ -10,30 +10,24 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import ToggleControl from '../../toggle-control';
-import type { ToggleControlProps } from '../../toggle-control/types';
-
-type Value = ToggleControlProps[ 'checked' ];
 
 // TODO: Should we customize the default `missingValue` message? It says to "check this box".
 
 const UnforwardedValidatedToggleControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ToggleControl >,
 		'__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.checked );
 
 	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
 	// so we need to set it manually.
@@ -47,19 +41,12 @@ const UnforwardedValidatedToggleControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

package/src/validated-form-controls/components/toggle-group-control.tsx

@@ -9,27 +9,21 @@ import { forwardRef, useId, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import { ToggleGroupControl } from '../../toggle-group-control';
-import type { ToggleGroupControlProps } from '../../toggle-group-control/types';
-
-type Value = ToggleGroupControlProps[ 'value' ];
 
 const UnforwardedValidatedToggleGroupControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ToggleGroupControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	const nameAttr = useId();
 
@@ -38,9 +32,6 @@ const UnforwardedValidatedToggleGroupControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
@@ -48,10 +39,6 @@ const UnforwardedValidatedToggleGroupControl = (
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					ref={ forwardedRef }
-					onChange={ ( value ) => {
-						valueRef.current = value;
-						onChange?.( value );
-					} }
 					{ ...restProps }
 				/>
 			</ControlWithError>

package/src/validated-form-controls/components/types.ts

@@ -1,4 +1,4 @@
-export type ValidatedControlProps< V > = {
+export type ValidatedControlProps = {
 	/**
 	 * Whether the control is required.
 	 * @default false
@@ -9,14 +9,6 @@ export type ValidatedControlProps< V > = {
 	 * @default false
 	 */
 	markWhenOptional?: boolean;
-	/**
-	 * Optional callback to run when the input should be validated. Use this to set
-	 * a `customValidity` as necessary.
-	 *
-	 * Always prefer using standard HTML attributes like `required` and `min`/`max` over
-	 * custom validators when possible, as they are simpler and have localized error messages built in.
-	 */
-	onValidate?: ( currentValue: V ) => void;
 	/**
 	 * Show a custom message based on the validation status.
 	 *

package/src/validated-form-controls/control-with-error.tsx

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { usePrevious } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
 	cloneElement,
@@ -13,7 +12,6 @@ import {
 /**
  * Internal dependencies
  */
-import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import type { ValidatedControlProps } from './components/types';
 import { ValidityIndicator } from './validity-indicator';
 
@@ -38,6 +36,7 @@ function appendRequiredIndicator(
 	}
 	return label;
 }
+const VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';
 
 /**
  * HTML elements that support the Constraint Validation API.
@@ -57,7 +56,6 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 	{
 		required,
 		markWhenOptional,
-		onValidate,
 		customValidity,
 		getValidityTarget,
 		children,
@@ -70,11 +68,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		 * Label the control as "optional" when _not_ `required`, instead of the inverse.
 		 */
 		markWhenOptional?: boolean;
-		/**
-		 * The callback to run when the input should be validated.
-		 */
-		onValidate?: () => void;
-		customValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];
+		customValidity?: ValidatedControlProps[ 'customValidity' ];
 		/**
 		 * A function that returns the actual element on which the validity data should be applied.
 		 */
@@ -99,31 +93,24 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		  }
 		| undefined
 	>();
+	const [ showMessage, setShowMessage ] = useState( false );
 	const [ isTouched, setIsTouched ] = useState( false );
-	const previousCustomValidityType = usePrevious( customValidity?.type );
 
-	// Ensure that error messages are visible after user attemps to submit a form
-	// with multiple invalid fields.
+	// Ensure that error messages are visible when an `invalid` event is triggered,
+	// e.g. when a form is submitted or reportValidity() is called.
 	useEffect( () => {
 		const validityTarget = getValidityTarget();
-		const showValidationMessage = () =>
-			setErrorMessage( validityTarget?.validationMessage );
-
-		validityTarget?.addEventListener( 'invalid', showValidationMessage );
-
-		return () => {
-			validityTarget?.removeEventListener(
-				'invalid',
-				showValidationMessage
-			);
+		const handler = () => {
+			setShowMessage( true );
+			validityTarget?.setAttribute( VALIDITY_VISIBLE_ATTRIBUTE, '' );
 		};
-	} );
 
-	useEffect( (): ReturnType< React.EffectCallback > => {
-		if ( ! isTouched ) {
-			return;
-		}
+		validityTarget?.addEventListener( 'invalid', handler );
+		return () => validityTarget?.removeEventListener( 'invalid', handler );
+	}, [ getValidityTarget ] );
 
+	// Handle validity messages.
+	useEffect( () => {
 		const validityTarget = getValidityTarget();
 
 		if ( ! customValidity?.type ) {
@@ -135,26 +122,16 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 
 		switch ( customValidity.type ) {
 			case 'validating': {
-				// Wait before showing a validating state.
-				const timer = setTimeout( () => {
-					validityTarget?.setCustomValidity( '' );
-					setErrorMessage( undefined );
-
-					setStatusMessage( {
-						type: 'validating',
-						message: customValidity.message,
-					} );
-				}, 1000 );
-
-				return () => clearTimeout( timer );
+				validityTarget?.setCustomValidity( '' );
+				setErrorMessage( undefined );
+
+				setStatusMessage( {
+					type: 'validating',
+					message: customValidity.message,
+				} );
+				break;
 			}
 			case 'valid': {
-				// Ensures that we wait for any async responses before showing
-				// a synchronously valid state.
-				if ( previousCustomValidityType === 'valid' ) {
-					break;
-				}
-
 				validityTarget?.setCustomValidity( '' );
 				setErrorMessage( validityTarget?.validationMessage );
 
@@ -174,14 +151,28 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 				break;
 			}
 		}
-	}, [
-		isTouched,
-		customValidity?.type,
-		customValidity?.message,
-		getValidityTarget,
-		previousCustomValidityType,
-	] );
+	}, [ customValidity, getValidityTarget ] );
+
+	// Show messages if field has been touched (i.e. has blurred at least once),
+	// or validation has been triggered by the consumer/user.
+	useEffect( (): ReturnType< React.EffectCallback > => {
+		if ( ! isTouched || showMessage ) {
+			return;
+		}
 
+		if ( customValidity?.type === 'validating' ) {
+			// Don't show validating indicators for quick calls that take less than 1 sec.
+			const timer = setTimeout( () => {
+				setShowMessage( true );
+			}, 1000 );
+
+			return () => clearTimeout( timer );
+		}
+
+		setShowMessage( true );
+	}, [ isTouched, customValidity?.type, showMessage ] );
+
+	// Mark blurred fields as touched.
 	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {
 		if ( isTouched ) {
 			return;
@@ -194,36 +185,32 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 			! event.currentTarget.contains( event.relatedTarget )
 		) {
 			setIsTouched( true );
-			onValidate?.();
+			getValidityTarget()?.setAttribute( VALIDITY_VISIBLE_ATTRIBUTE, '' );
 		}
 	};
 
-	const onChange = ( ...args: unknown[] ) => {
-		children.props.onChange?.( ...args );
-
-		// Only validate incrementally if the field has blurred at least once,
-		// or currently has an error message.
-		if ( isTouched || errorMessage ) {
-			onValidate?.();
+	const message = () => {
+		if ( errorMessage ) {
+			return (
+				<ValidityIndicator type="invalid" message={ errorMessage } />
+			);
 		}
-	};
-
-	const onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
-		// Ensures that custom validators are triggered when the user submits by pressing Enter,
-		// without ever blurring the control.
-		if ( event.key === 'Enter' ) {
-			onValidate?.();
+		if ( statusMessage?.type ) {
+			return (
+				<ValidityIndicator
+					type={ statusMessage.type }
+					message={ statusMessage.message }
+				/>
+			);
 		}
+		return null;
 	};
 
 	return (
-		// Disable reason: Just listening to a bubbled event, not for interaction.
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className="components-validated-control"
 			ref={ forwardedRef }
 			onBlur={ onBlur }
-			onKeyDown={ withIgnoreIMEEvents( onKeyDown ) }
 		>
 			{ cloneElement( children, {
 				label: appendRequiredIndicator(
@@ -231,23 +218,9 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 					required,
 					markWhenOptional
 				),
-				onChange,
 				required,
 			} ) }
-			<div aria-live="polite">
-				{ errorMessage && (
-					<ValidityIndicator
-						type="invalid"
-						message={ errorMessage }
-					/>
-				) }
-				{ ! errorMessage && statusMessage && (
-					<ValidityIndicator
-						type={ statusMessage.type }
-						message={ statusMessage.message }
-					/>
-				) }
-			</div>
+			<div aria-live="polite">{ showMessage && message() }</div>
 		</div>
 	);
 }

package/src/validated-form-controls/style.scss

@@ -4,14 +4,14 @@
 
 .components-validated-control {
 	// For components based on InputBase
-	&:has(:is(input, select):user-invalid)
+	&:has(:is(input, select):invalid[data-validity-visible])
 	.components-input-control__backdrop {
 		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For TextControl, TextareaControl
-	:is(textarea, input[type="text"]):user-invalid {
+	:is(textarea, input[type="text"]):invalid[data-validity-visible] {
 		--wp-admin-theme-color: #{$alert-red};
 		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
@@ -19,9 +19,9 @@
 
 	// For ComboboxControl
 	.components-combobox-control__suggestions-container:has(
-	input:user-invalid
+	input:invalid[data-validity-visible]
 ):not(:has([aria-expanded="true"])) {
-		border-color: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 	}
 }
 
@@ -29,18 +29,18 @@
 	position: relative;
 
 	// For CustomSelectControl
-	&:has(select:user-invalid) .components-input-control__backdrop {
+	&:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
 		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For ToggleGroupControl
-	&:has(input[type="radio"]:invalid) {
+	&:has(input[type="radio"]:invalid[data-validity-visible]) {
 		--wp-components-color-accent: #{$alert-red};
 	}
 
 	// For FormTokenField
-	&:has(input:user-invalid) .components-form-token-field__input-container:not(:has([aria-expanded="true"])) {
+	&:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded="true"])) {
 		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}

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

@@ -38,7 +38,7 @@ describe( 'ControlWithError', () => {
 					>[ 'customValidity' ]
 				>( undefined );
 
-			const onValidate = useCallback(
+			const onChange = useCallback(
 				( value?: string ) => {
 					setCustomValidity( {
 						type: 'validating',
@@ -59,6 +59,8 @@ describe( 'ControlWithError', () => {
 							} );
 						}
 					}, serverDelayMs );
+
+					setText( value ?? '' );
 				},
 				[ serverDelayMs ]
 			);
@@ -67,10 +69,7 @@ describe( 'ControlWithError', () => {
 				<ValidatedInputControl
 					label="Text"
 					value={ text }
-					onChange={ ( newValue ) => {
-						setText( newValue ?? '' );
-					} }
-					onValidate={ onValidate }
+					onChange={ onChange }
 					customValidity={ customValidity }
 					{ ...restProps }
 				/>
@@ -221,4 +220,66 @@ describe( 'ControlWithError', () => {
 			} );
 		} );
 	} );
+
+	describe( 'Form submission', () => {
+		const CustomValidatedInputControl = ( {
+			...restProps
+		}: React.ComponentProps< typeof ValidatedInputControl > ) => {
+			const [ customValidity, setCustomValidity ] =
+				useState<
+					React.ComponentProps<
+						typeof ValidatedInputControl
+					>[ 'customValidity' ]
+				>( undefined );
+			return (
+				<ValidatedInputControl
+					onChange={ ( value ) =>
+						value === 'error'
+							? setCustomValidity( {
+									type: 'invalid',
+									message: 'The word "error" is not allowed.',
+							  } )
+							: setCustomValidity( undefined )
+					}
+					customValidity={ customValidity }
+					{ ...restProps }
+				/>
+			);
+		};
+
+		it( 'should show custom validity messages regardless of "touched" state if parent form is submitted', async () => {
+			const user = userEvent.setup();
+			const onSubmit = jest.fn();
+			render(
+				<form onSubmit={ onSubmit }>
+					<CustomValidatedInputControl label="Text" />
+					<button type="submit">Submit</button>
+				</form>
+			);
+
+			const input = screen.getByRole< HTMLInputElement >( 'textbox', {
+				name: 'Text',
+			} );
+
+			// User has interacted, but not blurred
+			await user.type( input, 'error' );
+			await user.keyboard( '{enter}' );
+
+			// Input is marked as invalid at the HTML level
+			await waitFor( () => {
+				expect( input.checkValidity() ).toBe( false );
+			} );
+			expect( input.validationMessage ).toBe(
+				'The word "error" is not allowed.'
+			);
+
+			// Field is showing the error message
+			expect(
+				screen.getByText( 'The word "error" is not allowed.' )
+			).toBeVisible();
+
+			// Form is not submitted
+			expect( onSubmit ).not.toHaveBeenCalled();
+		} );
+	} );
 } );

package/tsconfig.json

@@ -5,6 +5,7 @@
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
+			"css-modules",
 			"jest",
 			"@testing-library/jest-dom"
 		]