Skip to content

ControlWithError: Show validating state when transitioning from error state #71260

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 10 commits into from
Aug 26, 2025
Merged

ControlWithError: Show validating state when transitioning from error state #71260

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dea1939
Add tests
mirka Aug 19, 2025
1046981
ControlWithError: Show validating state when transitioning from error…
mirka Aug 19, 2025
ef64fa6
Add changelog
mirka Aug 19, 2025
125b759
Mimic a stable server response time
mirka Aug 20, 2025
0adf893
Prefer `toBeVisible` in tests
mirka Aug 20, 2025
a50671f
Fix useEffect return type weirdness
mirka Aug 20, 2025
ffa9e22
Add test for deferring local validity state until server response is …
mirka Aug 22, 2025
b256311
Add play function
mirka Aug 22, 2025
8f4198b
Wait for async response before showing local state
mirka Aug 22, 2025
bc50407
Don't export test story
mirka Aug 26, 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
Prev Previous commit
Next Next commit
Mimic a stable server response time
  • Loading branch information
@mirka
mirka committed Aug 20, 2025
commit 125b759816f6a1e2f945a02d198c27de628799e9
31 changes: 13 additions & 18 deletions packages/components/src/validated-form-controls/components/stories/overview.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,24 +166,19 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
} );

clearTimeout( timeoutRef.current );
timeoutRef.current = setTimeout(
() => {
if ( v?.toString().toLowerCase() === 'error' ) {
setCustomValidity( {
type: 'invalid',
message: 'The word "error" is not allowed.',
} );
} else {
setCustomValidity( {
type: 'valid',
message: 'Validated',
} );
}
},
// Mimics a random server response time.
// eslint-disable-next-line no-restricted-syntax
Math.random() < 0.5 ? 1500 : 300
);
timeoutRef.current = setTimeout( () => {
if ( v?.toString().toLowerCase() === 'error' ) {
setCustomValidity( {
type: 'invalid',
message: 'The word "error" is not allowed.',
} );
} else {
setCustomValidity( {
type: 'valid',
message: 'Validated',
} );
}
}, 1500 );
}, 500 ),
[]
);
Expand Down