RAC SearchField does not revalidate after pressing clear button
- 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
When using the default native HTML validation with an uncontrolled SearchField, pressing the clear button doesn't update the validation even after the input is blurred. Depending on the criteria you define, pressing the clear button could leave a confusing/incorrect validation message in place. It's unexpected that pressing the clear button doesn't have the same behavior as manually clearing the value (i.e. highlight input text -> press backspace).
### 🤔 Expected Behavior?
Pressing the clear button triggers a re-validation after the input blurs.
### 😯 Current Behavior
The validation message that applied before the user clears the search input remains in place, even through a form submit, when a different validation message should apply. Manually clearing the search input text with backspace does not have the same behavior as pressing the clear button.
### 💁 Possible Solution
_No response_
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
See https://codesandbox.io/p/sandbox/searchfield-clear-no-validation-ql7s2g.
https://github.com/user-attachments/assets/734f826b-a74f-481f-9995-1731517c30dc
1. Enter "123" into the input
2. Blur the input (i.e. press outside) and verify no validation message appears
3. Manually clear the input by highlighting the text and pressing backspace
4. Blur the input (i.e. press outside) and verify the "Please fill out this field." message appears
5. Enter "123" into the input
6. Blur the input (i.e. press outside) and verify no validation message appears
7. Press the clear button, verify focus shifts to the input
8. Blur the input (i.e. press outside) and verify no validation message appears. I expect the "Please fill out this field." message to appear
https://github.com/user-attachments/assets/dffc17d4-4621-49e9-a62e-58768b28f33c
1. Enter "12" into the input
2. Blur the input (i.e. press outside) and verify the "Please use at least 3 characters (you are currently using 2 characters)." message appears
3. Press the clear button and verify the "Please use at least 3 characters (you are currently using 2 characters)." still appears even though it is now incorrect -- the user is using 0 characters. I expect the "Please fill out this field." message to appear instead.
4. Press submit and verify the "Please use at least 3 characters (you are currently using 2 characters)." is still present. I expect the "Please fill out this field." message to appear instead. From the user's perspective it's possible to submit the form with a blank input and see 2 different error messages depending on the sequence of events.
### Version
react-aria-components 1.4.1
### What browsers are you seeing the problem on?
Firefox, Chrome
### If other, please specify.
_No response_
### What operating system are you using?
macOS
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the react-aria-components SearchField entry point and reproduce the issue in the linked CodeSandbox using the documented browser steps. Confirm the clear button's behavior against manual clearing, then verify that blur and form submission show the validation message for the current value rather than the previous value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100