react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Make `useSearchField` behave close to browser

Open QzCurious opened this issue 1 year ago • 0 comments

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

QzCurious avatar May 17 '24 09:05 QzCurious