RAC SearchField does not revalidate after pressing clear button

[adriantrunzo]

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.

Screen.Recording.2024-10-25.at.4.56.09.PM.mov

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

Screen.Recording.2024-10-25.at.4.58.38.PM.mov

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