search

edmundhung / conform

A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
https://conform.guide
MIT License
1.98k stars 107 forks source link

Focus-on-error can cause unexpected behavior in combination with `onBlur` validation #801

Open lensbart opened 2 weeks ago

lensbart commented 2 weeks ago

Describe the bug and the expected behavior

I’m dealing with a form with input validation on blur. Some fields are mandatory and initially empty, so that if you blur by focusing another mandatory and empty field, you will get stuck in a perpetual focus/blur loop:

https://github.com/user-attachments/assets/8699d43a-fa12-475a-b9f7-fb9216d86917

Apart from this, I feel like it’s more user-friendly to not programmatically change the focus on blur, since it is unexpected and counters the user action:

https://github.com/user-attachments/assets/b21557f9-15ac-46d7-b53f-ad4e16dedf86

Suggested solutions:

Are you open to a quick PR that adds a boolean focusOnError to the form options?

Thanks.

Conform version

v1.2.2

Steps to Reproduce the Bug or Issue

See screen recording above. Have two <input type="text" />s that are validated on blur, validation schema should be z.string() for both (which Conform interprets as disallowing ""), initial value should be "", blur one input by focusing the other input.

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, Others

Screenshots or Videos

See above

Additional context

Previously commented on this discussion, but I figured I could open an issue since this is probably unexpected behavior.

edmundhung commented 1 week ago

I might have misunderstood something. But I don't think we are changing the focus on validation.

Any chance you can provide a repo? You can use our example here:

https://stackblitz.com/github/edmundhung/conform/tree/main/examples/remix