[Bug] <SearchField /> trigger onSubmit when pressing Enter is used for completing IME

[QzCurious]

Though I use IME, but I only learned that it somehow relate to how I type/construct Chinese characters. I don't know it in any technical aspect.

It's recorded from official docs here. What I'm doing is:

1. Click on <SearchField /> and ready for typing
2. Switch IME for typing Chinese characters
3. Start typing some primitives to construct the words "被送出"
4. While I type, you can tell that I'm "constructing" by the underline
5. Whenever I'm done constructing, I press "Enter" to construct/complete the words "被送出"
6. The bug happened

Screen.Recording.2024-05-06.at.3.49.34.PM.mov

I though this behavior is caused by trigger onSubmit directly by keypress on "Enter" key (Have been discussed a bit on #5774 (comment)).

At this point, I'd like to argue again that instead of having a custom onSubmit implementation, not interrupting browser default behavior for "Enter on an input" might be a better approach .

[ktabors]

I did a quick experiment and it looks like adding the fix from https://github.com/adobe/react-spectrum/pull/5923/files#diff-6824254daab8a81b5b0cdb3845a06623eda41b64667b29f6abee7ef51da9c2afR115 (isComposing) to

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

Line 68 in b5974ad

if (key === 'Enter') {

which was mentioned in Daniel's comment on #5774, this would be resolved.

[QzCurious]

isComposing sound a way to it. But I'm currently not sure why it block and handle enter, it seems to me a problem being created to be solved.

I would say, let html do what it's jobs and only catch cases we care:

let {
  isDisabled,
  isReadOnly,
- onSubmit = () => {},
+ onSubmit,
  onClear,
  type = 'search'
} = props;

let onKeyDown = (e) => {
  const key = e.key;

- if (key === 'Enter') {
+ if (key === 'Enter' && (isDisabled || isReadOnly)) {
    e.preventDefault();
  }

  if (isDisabled || isReadOnly) {
    return;
  }

- if (key === 'Enter') {
+ // for backward compatibility; otherwise it submit the form as how html would do
+ if (key === 'Enter' && onSubmit) {
+   e.preventDefault();
    onSubmit(state.value);
  }

The fix is not just as easy as modifying those code. That's why I'm asking for the purpose.

[ktabors]

Thanks for providing a code sample and including the part for backwards compatibility to improve this while maintaining the existing behavior. Are you able to create a PR with this update?

[QzCurious]

I've open a PR on #6404. Something you might need to help me with:

1. Should this be converted to a issue?
2. I've update the tests but the behavior might need some extra investigation

[QzCurious]

The issue is solved and merged by #6404.