Fix correctly handle IME Input in Combobox

[ryo-manba]

related to nextui-org/nextui#2121

This PR addresses a bug in the combobox component where inputs from an IME were being incorrectly committed before the user completed their text entry.

✅ 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

before

combobox-ime-before.mov

after

combobox-ime-after.mov

📝 Test Instructions:

Setup for MacOS

Add the Japanese input method

• Settings > Keyboard > Input Sources > Add a language > Japanese

Test Steps

1. Choose Hiragana in the menu bar.
2. Navigate to http://localhost:9003/?path=/story/react-aria-components--combo-box-ime-example&providerSwitcher-express=false&strict=true
3. Type nihon followed by the enter key. This should result in "にほん" or "日本".
4. Continue typing go, and the combobox should suggest "にほんご". Press enter.
5. Previously, the initial input "にほん" would be cleared, leaving only "ご". After this fix, "にほんご" should be correctly inputted without clearing the previous characters.

🧢 Your Project:

https://github.com/nextui-org/nextui

[snowystinger]

GET_BUILD

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

[snowystinger]

Thanks for the PR, this is indeed better.

I noticed that the popover keeps opening and closing in the background. I think we could introduce some behavior based on the composition events from useTextfield, onCompositiionStart and onCompositionEnd. Then we could keep the popover closed while composing and reopen it when composition ends.

Possibly closing when composition starts and opening when it ends? I tried it, but I don't know enough about composition to know what feels natural to a user. I'm guessing I'm missing something because the popover didn't always reopen, but maybe I just don't know how to end compositions correctly.

I'm happy for this to be handled separately in a new issue. Just let us know if it's something you'd like to take care of.

[ryo-manba]

@snowystinger

I think we could introduce some behavior based on the composition events from useTextfield, onCompositiionStart and onCompositionEnd.

This is a good idea. I'll see if I can come up with another issue to address what state would be desirable for users!
Thanks for the feedback!