react-spectrum
react-spectrum copied to clipboard
Make `useSearchField` behave close to browser
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 #6332
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
Just render a SearchField and test it with/without onSubmit:
(code modified form packages/react-aria-components/stories/SearchField.stories.tsx)
import {Button, Input, Label, SearchField} from 'react-aria-components';
import {classNames} from '@react-spectrum/utils';
import React from 'react';
import styles from '../example/index.css';
export default {
title: 'React Aria Components'
};
export const SearchFieldExample = () => {
return (
<form
onSubmit={(e) => {
alert('browser default form submit');
e.preventDefault();
}}>
<SearchField
// onSubmit={() => alert('onSubmit prop')}
className={classNames(styles, 'searchFieldExample')}
data-testid="search-field-example">
<Label>Search</Label>
<Input />
<Button>✕</Button>
</SearchField>
</form>
);
};
https://github.com/adobe/react-spectrum/assets/38932402/b61941d7-9ff4-42fb-aecd-1515d32863d3
🧢 Your Project:
https://github.com/QzCurious/react-spectrum/tree/fix/useSearchField