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
Don't export test story
  • Loading branch information
@mirka
mirka committed Aug 26, 2025
commit bc50407ac4cd9929f0927613e3afe50301cdbcd8
16 changes: 11 additions & 5 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 @@ -196,6 +196,17 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
/>
);
},
args: {
label: 'Text',
help: 'The word "error" will trigger an error asynchronously.',
required: true,
},
};

// Not exported - Only for testing purposes.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AsyncValidationWithTest: StoryObj< typeof ValidatedInputControl > = {
...AsyncValidation,
play: async ( { canvasElement } ) => {
Copy link
Copy Markdown
Member

@oandregal oandregal Aug 26, 2025

Choose a reason for hiding this comment

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

This is nice and weird 😅 The first time I encountered I felt it was a bug. It'd be nice to trigger this intentionally from a button instead of executing it on load.

It makes it impossible to test/learn how this component works: for example, due to having this setup, the first user validation will trigger on change, not on blur. So I think I'd rather not have this if this can't be triggered by users.

Copy link
Copy Markdown
Member Author

@mirka mirka Aug 26, 2025

Choose a reason for hiding this comment

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

That's fair 😅 Unfortunately there's no way to disable the autoplay on the individual story pages. I'll keep the story unexported so it's still available for test purposes (Jest was a bit unreliable for this one).

const canvas = within( canvasElement );
await userEvent.click( canvas.getByRole( 'textbox' ) );
Expand Down Expand Up @@ -277,8 +288,3 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
);
},
};
AsyncValidation.args = {
label: 'Text',
help: 'The word "error" will trigger an error asynchronously.',
required: true,
};
Loading