Fix correctly handle IME Input in Combobox (#6239)

Fix correctly handle IME Input in Combobox

Author: ryo-manba

packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js

@@ -22,6 +22,9 @@ describe('useSearchAutocomplete', function () {
   let stopPropagation = jest.fn();
   let event = (e) => ({
     ...e,
+    nativeEvent: {
+      isComposing: false
+    },
     preventDefault,
     stopPropagation
   });

packages/@react-aria/combobox/src/useComboBox.ts

@@ -111,6 +111,9 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
 
   // For textfield specific keydown operations
   let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
     switch (e.key) {
       case 'Enter':
       case 'Tab':

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -24,6 +24,9 @@ describe('useComboBox', function () {
   let toggleSpy = jest.fn();
   let event = (e) => ({
     ...e,
+    nativeEvent: {
+      isComposing: false
+    },
     preventDefault,
     stopPropagation
   });

packages/react-aria-components/stories/ComboBox.stories.tsx

@@ -183,3 +183,27 @@ export const ComboBoxAsyncLoadingExample = () => {
     </ComboBox>
   );
 };
+
+export const ComboBoxImeExample = () => (
+  <ComboBox>
+    <Label style={{display: 'block'}}>IME Test</Label>
+    <div style={{display: 'flex'}}>
+      <Input />
+      <Button>
+        <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+      </Button>
+    </div>
+    <Popover placement="bottom end">
+      <ListBox
+        data-testid="combo-box-list-box"
+        className={styles.menu}>
+        <MyListBoxItem>にほんご</MyListBoxItem>
+        <MyListBoxItem>ニホンゴ</MyListBoxItem>
+        <MyListBoxItem>ﾆﾎﾝｺﾞ</MyListBoxItem>
+        <MyListBoxItem>日本語</MyListBoxItem>
+        <MyListBoxItem>123</MyListBoxItem>
+        <MyListBoxItem>１２３</MyListBoxItem>
+      </ListBox>
+    </Popover>
+  </ComboBox>
+);