Invalid text fields are not getting auto focused in an useActionState setup #9256
Description
Provide a general summary of the issue here
I have a simple TextField setup where I am using a Server Action with useActionState hook.
I return an error object from the server with the field names as keys. I then pass these to the validationErrros on the Form element from RAC.
Fields get marked as invalid, error messages get displayed. However, none of the fields get automatically focused. Ideally, on error, the first field that has an error should be focused.
You can see in the below demo, that the client side validation properly auto focuses the field when invalid. It's the server side validation that doesn't auto focus the fields.
I am not sure whether this is somehow expected behavior in this setup or not. Since I felt like this is a bug I thought of posting here.
🤔 Expected Behavior?
In a list of invalid fields, the first field should ideally be focused.
😯 Current Behavior
None of the invalid fields get auto focused.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/rac-field-focus-qpkvcd
Most relevant code is in actions.ts and FormSetup.ts files inside the /app folder.
- Keep the fields empty and hit the sumbit button. You should see client side validation gets triggered for the first field (only the first field has client validation) and that field gets focused.
- Fill out the first field and hit submit again. (Keep email empty).
- You should see error message displayed for email but it doesn't get focused.
Version
1.13.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Windows
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response