SearchField does not submit when hitting ENTER

[janvorwerk]

Hello

Despite that the doc states that SearchField (from react-aria-components) should trigger a form submission when pressing Enter, I do not manage to see this behavior.

Tested using Chrome, Firefox, Safari and Edge.

See this example:
https://codesandbox.io/p/sandbox/searchbuttonnotsubmitting-7cq2sy

Should I open an issue? or did I miss something 😭?

[LFDanLu]

Ah, that would because of this:

react-spectrum/packages/@react-aria/searchfield/src/useSearchField.ts

Lines 60 to 69 in b5974ad

	if (key === 'Enter') {
	e.preventDefault();
	}
	if (isDisabled || isReadOnly) {
	return;
	}
	if (key === 'Enter') {
	onSubmit(state.value);

. Its been a while since I touched that code, but I think we did it like that because we felt that typically users would want to trigger a search operation rather than submit a form when hitting enter.

[janvorwerk]

Thanks for your reply! 🙏 So looking at the code, I changed the sandbox referenced on the ticket to make it work, simply by forwarding the submit function to the search field:

      <SearchField label="Search" name="search" onSubmit={onSubmit}>

Actually, this is documented: I need to learn and read your doc more throughly!! 🥹 It's quite dense! 👍
I read the features section too fast, reading with support for the Enter and Escape keys to submit and clear the field as "submit and clear the form"

[QzCurious]

Hi @LFDanLu, Remix user here. As Remix conventionally rely on how native form submission works, preventing default behavior is kind of troubled. Kindly asking you to check the purpose and explain more on meaning of "search operation". (I thought <input type="search"> is mean to enter-trigger a form regardless of using Remix or not)