Skip to content
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.

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

Validation message disappears for a split-second when fields blur #131

Open
davestewart opened this issue Feb 11, 2025 · 2 comments
Open
Labels
✨ enhancement New feature or request

Comments

@davestewart
Copy link

davestewart commented Feb 11, 2025

Describe the bug

If a validation error is showing and I tab to another form field, the error disappears for a split-second, then reappears.

This is both distracting and causes layout shift.

To Reproduce

  • hit the demo here
  • open the dev tools
  • click between the form fields
  • see the flash on the screen and the error logs in the console

Expected behavior

All validation messages should remain

Screenshots or Screencast

CleanShot.2025-02-11.at.16.50.08.mp4

Additional context

I saw this in one of the website demos, but I can't seem to find it now.

P.S. Hey Abdelrahman!

@davestewart davestewart added the ⏳ triage Evaluate the issue and assign the appropriate priority label label Feb 11, 2025
@davestewart
Copy link
Author

It seems that the error for the first field is removed at the point of hitting Tab:

Image

@logaretm
Copy link
Member

Hey Dave, nice to see you here.

I believe this is because we reset the errors at the start of each validation run. Usually layout shift is the user responsibility to preserve that space with padding or whatever.

Still, if it helps that we move the clearing till right before the new errors are populated, then maybe we should do it. I will take a look into that.

@logaretm logaretm added ✨ enhancement New feature or request and removed ⏳ triage Evaluate the issue and assign the appropriate priority label labels Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants