fix: ignore composition events with option

algolia · Jan 25, 2024 · 4ae0b2e · 4ae0b2e
1 parent d27f73e
commit 4ae0b2e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/packages/autocomplete-core/src/__tests__/getInputProps.test.ts b/packages/autocomplete-core/src/__tests__/getInputProps.test.ts
@@ -646,7 +646,7 @@ describe('getInputProps', () => {
       expect(environment.clearTimeout).toHaveBeenLastCalledWith(999);
     });
 
-    test('stops process if IME composition is in progress', () => {
+    test('stops process if IME composition is in progress and `ignoreCompositionEvents: true`', () => {
       const getSources = jest.fn((..._args: any[]) => {
         return [
           createSource({
@@ -657,6 +657,7 @@ describe('getInputProps', () => {
         ];
       });
       const { inputElement } = createPlayground(createAutocomplete, {
+        ignoreCompositionEvents: true,
         getSources,
       });
 
@@ -1974,7 +1975,7 @@ describe('getInputProps', () => {
       });
     });
 
-    test('stops process if IME is in progress', () => {
+    test('stops process if IME composition is in progress`', () => {
       const onStateChange = jest.fn();
       const { inputElement } = createPlayground(createAutocomplete, {
         openOnFocus: true,
@@ -2029,16 +2030,25 @@ describe('getInputProps', () => {
         });
       });
 
-      // 3. Selecting the 3rd suggestion on the IME window
+      // 3. Checking that activeItemId has reverted to null due to input change
+      expect(onStateChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          state: expect.objectContaining({
+            activeItemId: null,
+          }),
+        })
+      );
+
+      // 4. Selecting the 3rd suggestion on the IME window
       fireEvent.keyDown(inputElement, { key: 'ArrowDown', isComposing: true });
       fireEvent.keyDown(inputElement, { key: 'ArrowDown', isComposing: true });
       fireEvent.keyDown(inputElement, { key: 'ArrowDown', isComposing: true });
 
-      // 4. Checking that activeItemId has not changed
+      // 5. Checking that activeItemId has not changed
       expect(onStateChange).toHaveBeenLastCalledWith(
         expect.objectContaining({
           state: expect.objectContaining({
-            activeItemId: 0,
+            activeItemId: null,
           }),
         })
       );

diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts
@@ -28,6 +28,7 @@ export function getDefaultProps<TItem extends BaseItem>(
     debug: false,
     openOnFocus: false,
     enterKeyHint: undefined,
+    ignoreCompositionEvents: false,
     placeholder: '',
     autoFocus: false,
     defaultActiveItemId: null,

diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -224,7 +224,10 @@ export function getPropGetters<
           (event as unknown as Event).currentTarget as HTMLInputElement
         ).value;
 
-        if (getNativeEvent(event as unknown as InputEvent).isComposing) {
+        if (
+          props.ignoreCompositionEvents &&
+          getNativeEvent(event as unknown as InputEvent).isComposing
+        ) {
           setters.setQuery(value);
           return;
         }

diff --git a/packages/autocomplete-shared/src/core/AutocompleteOptions.ts b/packages/autocomplete-shared/src/core/AutocompleteOptions.ts
@@ -88,6 +88,14 @@ export interface AutocompleteOptions<TItem extends BaseItem> {
    * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-enterkeyhint
    */
   enterKeyHint?: AutocompleteEnterKeyHint;
+  /**
+   * Whether to update the search input value in the middle of a
+   * composition session.
+   *
+   * @default false
+   * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-ignorecompositionevents
+   */
+  ignoreCompositionEvents?: boolean;
   /**
    * The placeholder text to show in the search input when there's no query.
    *
@@ -200,6 +208,7 @@ export interface InternalAutocompleteOptions<TItem extends BaseItem>
   id: string;
   onStateChange(props: OnStateChangeProps<TItem>): void;
   enterKeyHint: AutocompleteEnterKeyHint | undefined;
+  ignoreCompositionEvents: boolean;
   placeholder: string;
   autoFocus: boolean;
   defaultActiveItemId: number | null;