Skip to content

Validated form controls: Separate validation state and message display state #73559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 18 commits into from
Dec 8, 2025
Merged

Validated form controls: Separate validation state and message display state #73559

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
874daba
Set validation states in real time and display separately
mirka Nov 25, 2025
8bfa861
Rewrite stories
mirka Nov 25, 2025
35d6513
Remove `onValidate` support
mirka Nov 25, 2025
4437f09
Remove back compat for `onValidate`
mirka Nov 25, 2025
8ee9c93
Update docs
mirka Nov 25, 2025
c9769b5
Add attribute when validity visible
mirka Nov 25, 2025
3c63ead
Improve interactions in async example case
mirka Nov 25, 2025
c682f86
Make help text replacement story work again
mirka Nov 25, 2025
c28e316
Remove unnecessary memo
mirka Nov 25, 2025
c08c23b
Add changelog
mirka Nov 25, 2025
4f65408
Merge branch 'trunk' into streamline-validation
mirka Dec 3, 2025
4f8b275
Add story for custom errors on submit
mirka Dec 3, 2025
6187246
Simplify custom validity stories
mirka Dec 3, 2025
23d7da5
Improve code comments
mirka Dec 3, 2025
98c2c4e
Tweak changelog
mirka Dec 3, 2025
3edd884
NumberControl: Remove outdated comment
mirka Dec 8, 2025
b301159
Merge branch 'trunk' into streamline-validation
mirka Dec 8, 2025
3714604
Add explicit dependency in useEffect
mirka Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 1 addition & 14 deletions packages/components/src/validated-form-controls/components/checkbox-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,28 @@ import { forwardRef, useRef } from '@wordpress/element';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import CheckboxControl from '../../checkbox-control';
import type { CheckboxControlProps } from '../../checkbox-control/types';

type Value = CheckboxControlProps[ 'checked' ];

const UnforwardedValidatedCheckboxControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof CheckboxControl >,
'__nextHasNoMarginBottom'
> &
ValidatedControlProps< Value >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLInputElement >
) => {
const validityTargetRef = useRef< HTMLDivElement >( null );
const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
const valueRef = useRef< Value >( restProps.checked );

return (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
ref={ mergedRefs }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () =>
validityTargetRef.current?.querySelector< HTMLInputElement >(
Expand All @@ -50,10 +41,6 @@ const UnforwardedValidatedCheckboxControl = (
>
<CheckboxControl
__nextHasNoMarginBottom
onChange={ ( value ) => {
valueRef.current = value;
onChange?.( value );
} }
// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
{ ...restProps }
/>
Expand Down
15 changes: 1 addition & 14 deletions packages/components/src/validated-form-controls/components/combobox-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,22 @@ import { forwardRef, useEffect, useRef } from '@wordpress/element';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import ComboboxControl from '../../combobox-control';
import type { ComboboxControlProps } from '../../combobox-control/types';

type Value = ComboboxControlProps[ 'value' ];

const UnforwardedValidatedComboboxControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof ComboboxControl >,
'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
> &
ValidatedControlProps< Value >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLInputElement >
) => {
const validityTargetRef = useRef< HTMLInputElement >( null );
const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
const valueRef = useRef< Value >( restProps.value );

// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
// so we need to set it manually.
Expand All @@ -51,9 +45,6 @@ const UnforwardedValidatedComboboxControl = (
required={ required }
markWhenOptional={ markWhenOptional }
ref={ mergedRefs }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () =>
validityTargetRef.current?.querySelector< HTMLInputElement >(
Expand All @@ -65,10 +56,6 @@ const UnforwardedValidatedComboboxControl = (
__nextHasNoMarginBottom
__next40pxDefaultSize
{ ...restProps }
onChange={ ( value ) => {
valueRef.current = value;
onChange?.( value );
} }
/>
</ControlWithError>
);
Expand Down
20 changes: 1 addition & 19 deletions packages/components/src/validated-form-controls/components/custom-select-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import CustomSelectControl from '../../custom-select-control';
import type {
CustomSelectOption,
CustomSelectProps,
} from '../../custom-select-control/types';

type CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;

type Value = CustomSelectControlProps[ 'value' ];

const UnforwardedValidatedCustomSelectControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof CustomSelectControl >,
'__next40pxDefaultSize'
> &
ValidatedControlProps< Value >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLDivElement >
) => {
const validityTargetRef = useRef< HTMLSelectElement >( null );
const valueRef = useRef< Value >( restProps.value );

return (
<div
Expand All @@ -44,20 +33,13 @@ const UnforwardedValidatedCustomSelectControl = (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () => validityTargetRef.current }
>
<CustomSelectControl
// TODO: Upstream limitation - Required isn't passed down correctly,
// so it needs to be set on a delegate element.
__next40pxDefaultSize
onChange={ ( value ) => {
valueRef.current = value.selectedItem;
onChange?.( value );
} }
{ ...restProps }
/>
</ControlWithError>
Expand Down
17 changes: 2 additions & 15 deletions packages/components/src/validated-form-controls/components/form-token-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import { FormTokenField } from '../../form-token-field';
import type { FormTokenFieldProps } from '../../form-token-field/types';

type Value = FormTokenFieldProps[ 'value' ];

const UnforwardedValidatedFormTokenField = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof FormTokenField >,
'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
> &
ValidatedControlProps< FormTokenFieldProps[ 'value' ] >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLDivElement >
) => {
const validityTargetRef = useRef< HTMLInputElement >( null );
const valueRef = useRef< Value >( restProps.value );

return (
<div
Expand All @@ -39,20 +33,13 @@ const UnforwardedValidatedFormTokenField = (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () => validityTargetRef.current }
>
<FormTokenField
__next40pxDefaultSize
__nextHasNoMarginBottom
{ ...restProps }
onChange={ ( value, ...args ) => {
valueRef.current = value;
onChange?.( value, ...args );
} }
/>
</ControlWithError>
<input
Expand All @@ -61,7 +48,7 @@ const UnforwardedValidatedFormTokenField = (
ref={ validityTargetRef }
required={ required }
value={
valueRef.current && valueRef.current.length > 0
restProps.value && restProps.value.length > 0
? 'hasvalue'
: ''
}
Expand Down
15 changes: 1 addition & 14 deletions packages/components/src/validated-form-controls/components/input-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,33 @@ import { useMergeRefs } from '@wordpress/compose';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import InputControl from '../../input-control';
import type { InputControlProps } from '../../input-control/types';

type Value = InputControlProps[ 'value' ];

const UnforwardedValidatedInputControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof InputControl >,
'__next40pxDefaultSize'
> &
ValidatedControlProps< InputControlProps[ 'value' ] >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLInputElement >
) => {
const validityTargetRef = useRef< HTMLInputElement >( null );
const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
const valueRef = useRef< Value >( restProps.value );

return (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () => validityTargetRef.current }
>
<InputControl
__next40pxDefaultSize
ref={ mergedRefs }
onChange={ ( value, ...args ) => {
valueRef.current = value;
onChange?.( value, ...args );
} }
{ ...restProps }
/>
</ControlWithError>
Expand Down
15 changes: 1 addition & 14 deletions packages/components/src/validated-form-controls/components/number-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,27 @@ import { useMergeRefs } from '@wordpress/compose';
import { ControlWithError } from '../control-with-error';
import NumberControl from '../../number-control';
import type { ValidatedControlProps } from './types';
import type { NumberControlProps } from '../../number-control/types';

type Value = NumberControlProps[ 'value' ];

const UnforwardedValidatedNumberControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: Omit<
React.ComponentProps< typeof NumberControl >,
'__next40pxDefaultSize'
> &
ValidatedControlProps< Value >,
ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLInputElement >
) => {
const validityTargetRef = useRef< HTMLInputElement >( null );
const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
const valueRef = useRef< Value >( restProps.value );

return (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () => validityTargetRef.current }
>
Expand All @@ -48,10 +39,6 @@ const UnforwardedValidatedNumberControl = (
ref={ mergedRefs }
// TODO: Upstream limitation - When form is submitted when value is undefined, it will
// automatically set a clamped value (as defined by `min` attribute, so 0 by default).
Copy link
Member

@aduth aduth Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this comment still relevant?

Suggested change
// TODO: Upstream limitation - When form is submitted when value is undefined, it will
// automatically set a clamped value (as defined by `min` attribute, so 0 by default).

Copy link
Member Author

@mirka mirka Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, not sure what changed. Maybe #34566. (3edd884)

onChange={ ( value, ...args ) => {
valueRef.current = value;
onChange?.( value, ...args );
} }
{ ...restProps }
/>
</ControlWithError>
Expand Down
20 changes: 2 additions & 18 deletions packages/components/src/validated-form-controls/components/radio-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,33 @@ import { forwardRef, useRef } from '@wordpress/element';
import { ControlWithError } from '../control-with-error';
import type { ValidatedControlProps } from './types';
import RadioControl from '../../radio-control';
import type { RadioControlProps } from '../../radio-control/types';

type Value = RadioControlProps[ 'selected' ];

const UnforwardedValidatedRadioControl = (
{
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}: React.ComponentProps< typeof RadioControl > &
ValidatedControlProps< Value >,
}: React.ComponentProps< typeof RadioControl > & ValidatedControlProps,
forwardedRef: React.ForwardedRef< HTMLDivElement >
) => {
const validityTargetRef = useRef< HTMLDivElement >( null );
const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
const valueRef = useRef< Value >( restProps.selected );

return (
<ControlWithError
required={ required }
markWhenOptional={ markWhenOptional }
// TODO: Upstream limitation - RadioControl does not accept a ref.
ref={ mergedRefs }
onValidate={ () => {
return onValidate?.( valueRef.current );
} }
customValidity={ customValidity }
getValidityTarget={ () =>
validityTargetRef.current?.querySelector< HTMLInputElement >(
'input[type="radio"]'
)
}
>
<RadioControl
onChange={ ( value ) => {
valueRef.current = value;
onChange?.( value );
} }
{ ...restProps }
/>
<RadioControl { ...restProps } />
</ControlWithError>
);
};
Expand Down
Loading
Loading