Make useSearchField behave close to browser

[QzCurious]

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.
• 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>
  );
};

Screen.Recording.2024-05-17.at.5.34.54.PM.mp4

🧢 Your Project:

https://github.com/QzCurious/react-spectrum/tree/fix/useSearchField

[ktabors]

Thanks for updating the tests.

[ktabors]

Can we combine this test and the following?

Suggested change

	it('preventDefault is not called for Escape', () => {
	it('preventDefault and stopPropagation are not called for Escape', () => {

[QzCurious]

I've merged the two test cases.

[LFDanLu]

Verified that the backcompat works and that omitting onSubmit properly causes native form validation, thanks for the fix!