revert: fix stop processing input when composing with an IME (#1226) (#1235)

This reverts commit 7f5ba08.

Author: dhayab

packages/autocomplete-core/src/__tests__/getInputProps.test.ts

@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 
 import {
@@ -645,66 +645,6 @@ describe('getInputProps', () => {
 
       expect(environment.clearTimeout).toHaveBeenLastCalledWith(999);
     });
-
-    test('stops process if IME composition is in progress', () => {
-      const getSources = jest.fn((..._args: any[]) => {
-        return [
-          createSource({
-            getItems() {
-              return [{ label: '1' }, { label: '2' }];
-            },
-          }),
-        ];
-      });
-      const { inputElement } = createPlayground(createAutocomplete, {
-        getSources,
-      });
-
-      // Typing 木 using the Wubihua input method
-      // see:
-      // - https://en.wikipedia.org/wiki/Stroke_count_method
-      // - https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event
-      const character = '木';
-      const strokes = ['一', '丨', '丿', '丶', character];
-
-      strokes.forEach((stroke, index) => {
-        const isFirst = index === 0;
-        const isLast = index === strokes.length - 1;
-        const query = isLast ? stroke : strokes.slice(0, index + 1).join('');
-
-        if (isFirst) {
-          fireEvent.compositionStart(inputElement);
-        }
-
-        fireEvent.compositionUpdate(inputElement, {
-          data: query,
-        });
-
-        fireEvent.input(inputElement, {
-          isComposing: true,
-          target: {
-            value: query,
-          },
-        });
-
-        if (isLast) {
-          fireEvent.compositionEnd(inputElement, {
-            data: query,
-            target: {
-              value: query,
-            },
-          });
-        }
-      });
-
-      expect(inputElement).toHaveValue(character);
-      expect(getSources).toHaveBeenCalledTimes(1);
-      expect(getSources).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          query: character,
-        })
-      );
-    });
   });
 
   describe('onKeyDown', () => {
@@ -1973,76 +1913,6 @@ describe('getInputProps', () => {
         );
       });
     });
-
-    test('stops process if IME is in progress', () => {
-      const onStateChange = jest.fn();
-      const { inputElement } = createPlayground(createAutocomplete, {
-        openOnFocus: true,
-        onStateChange,
-        initialState: {
-          collections: [
-            createCollection({
-              source: { sourceId: 'testSource' },
-              items: [
-                { label: '1' },
-                { label: '2' },
-                { label: '3' },
-                { label: '4' },
-              ],
-            }),
-          ],
-        },
-      });
-
-      inputElement.focus();
-
-      // 1. Pressing Arrow Down to select the first item
-      fireEvent.keyDown(inputElement, { key: 'ArrowDown' });
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          state: expect.objectContaining({
-            activeItemId: 0,
-          }),
-        })
-      );
-
-      // 2. Typing かくてい with a Japanese IME
-      const strokes = ['か', 'く', 'て', 'い'];
-      strokes.forEach((_stroke, index) => {
-        const isFirst = index === 0;
-        const query = strokes.slice(0, index + 1).join('');
-
-        if (isFirst) {
-          fireEvent.compositionStart(inputElement);
-        }
-
-        fireEvent.compositionUpdate(inputElement, {
-          data: query,
-        });
-
-        fireEvent.input(inputElement, {
-          isComposing: true,
-          data: query,
-          target: {
-            value: query,
-          },
-        });
-      });
-
-      // 3. 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
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          state: expect.objectContaining({
-            activeItemId: 0,
-          }),
-        })
-      );
-    });
   });
 
   describe('onFocus', () => {

packages/autocomplete-core/src/getPropGetters.ts

@@ -21,7 +21,6 @@ import {
   getAutocompleteElementId,
   isOrContainsNode,
   isSamsung,
-  getNativeEvent,
 } from './utils';
 
 interface GetPropGettersOptions<TItem extends BaseItem>
@@ -220,25 +219,6 @@ export function getPropGetters<
       maxLength,
       type: 'search',
       onChange: (event) => {
-        const value = (
-          (event as unknown as Event).currentTarget as HTMLInputElement
-        ).value;
-
-        if (getNativeEvent(event as unknown as InputEvent).isComposing) {
-          setters.setQuery(value);
-          return;
-        }
-
-        onInput({
-          event,
-          props,
-          query: value.slice(0, maxLength),
-          refresh,
-          store,
-          ...setters,
-        });
-      },
-      onCompositionEnd: (event) => {
         onInput({
           event,
           props,
@@ -251,10 +231,6 @@ export function getPropGetters<
         });
       },
       onKeyDown: (event) => {
-        if (getNativeEvent(event as unknown as InputEvent).isComposing) {
-          return;
-        }
-
         onKeyDown({
           event: event as unknown as KeyboardEvent,
           props,

packages/autocomplete-core/src/utils/getNativeEvent.ts

@@ -8,4 +8,3 @@ export * from './getAutocompleteElementId';
 export * from './isOrContainsNode';
 export * from './isSamsung';
 export * from './mapToAlgoliaResponse';
-export * from './getNativeEvent';

packages/autocomplete-core/src/utils/index.ts

@@ -110,9 +110,6 @@ function getNormalizedName(name: string): string {
   switch (name) {
     case 'onChange':
       return 'onInput';
-    // see: https://github.com/preactjs/preact/issues/1978
-    case 'onCompositionEnd':
-      return 'oncompositionend';
     default:
       return name;
   }

packages/autocomplete-js/src/utils/setProperties.ts

@@ -83,7 +83,6 @@ export type GetInputProps<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
   'aria-controls': string | undefined;
   'aria-labelledby': string;
   onChange(event: TEvent): void;
-  onCompositionEnd(event: TEvent): void;
   onKeyDown(event: TKeyboardEvent): void;
   onFocus(event: TEvent): void;
   onBlur(): void;

packages/autocomplete-shared/src/core/AutocompletePropGetters.ts

@@ -24,7 +24,6 @@ export function createPlayground<TItem extends Record<string, unknown>>(
   const formProps = autocomplete.getFormProps({ inputElement });
   inputElement.addEventListener('blur', inputProps.onBlur);
   inputElement.addEventListener('input', inputProps.onChange);
-  inputElement.addEventListener('compositionend', inputProps.onCompositionEnd);
   inputElement.addEventListener('click', inputProps.onClick);
   inputElement.addEventListener('focus', inputProps.onFocus);
   inputElement.addEventListener('keydown', inputProps.onKeyDown);