adobe / adobe/react-spectrum

Invalid text fields are not getting auto focused in an useActionState setup

Open
#9,256 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

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.

1. 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.
2. Fill out the first field and hit submit again. (Keep email empty).
3. 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.