-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make useSearchField
behave close to browser
#6404
Conversation
This commit changes how `useSearchField` behave. It previously rely on `onSubmit` prop to get "Enter submission". For now, "Enter" would trigger a normal form submission by default browser behavior. For backward compatibility, if onSubmit prop is provide, `onSubmit` is called and default form submission is prevented. related adobe#6332
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for updating the tests.
@@ -67,12 +67,10 @@ describe('useSearchField hook', () => { | |||
onSubmit.mockClear(); | |||
}); | |||
|
|||
it('preventDefault is called for Enter and not Escape', () => { | |||
it('preventDefault is not called for Escape', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we combine this test and the following?
it('preventDefault is not called for Escape', () => { | |
it('preventDefault and stopPropagation are not called for Escape', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've merged the two test cases.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verified that the backcompat works and that omitting onSubmit properly causes native form validation, thanks for the fix!
This commit changes how
useSearchField
behave. It previously rely ononSubmit
prop to get "Enter submission". For now, "Enter" would trigger a normal form submission by default browser behavior. For backward compatibility, if onSubmit prop is provide,onSubmit
is called and default form submission is prevented.related #6332
✅ Pull Request Checklist:
📝 Test Instructions:
Just render a
SearchField
and test it with/withoutonSubmit
:(code modified form packages/react-aria-components/stories/SearchField.stories.tsx)
Screen.Recording.2024-05-17.at.5.34.54.PM.mp4
🧢 Your Project:
https://github.com/QzCurious/react-spectrum/tree/fix/useSearchField