fix: handle late resolving promises with promise cancelation

bundlesize.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "packages/autocomplete-core/dist/umd/index.production.js",
-      "maxSize": "6 kB"
+      "maxSize": "6.25 kB"
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "16.5 kB"
+      "maxSize": "16.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

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

@@ -1,7 +1,13 @@
+import { noop } from '@algolia/autocomplete-shared';
 import userEvent from '@testing-library/user-event';
 
 import { AutocompleteState } from '..';
-import { createPlayground, createSource, defer } from '../../../../test/utils';
+import {
+  createPlayground,
+  createSource,
+  defer,
+  runAllMicroTasks,
+} from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 type Item = {
@@ -31,7 +37,7 @@ describe('concurrency', () => {
     userEvent.type(input, 'b');
     userEvent.type(input, 'c');
 
-    await defer(() => {}, timeout);
+    await defer(noop, timeout);
 
     let stateHistory: Array<
       AutocompleteState<Item>
@@ -57,7 +63,7 @@ describe('concurrency', () => {
 
     userEvent.type(input, '{backspace}'.repeat(3));
 
-    await defer(() => {}, timeout);
+    await defer(noop, timeout);
 
     stateHistory = onStateChange.mock.calls.flatMap((x) => x[0].state);
 
@@ -88,19 +94,44 @@ describe('concurrency', () => {
           getSources,
         });
 
-        userEvent.type(inputElement, 'ab{esc}');
+        userEvent.type(inputElement, 'ab');
 
-        await defer(() => {}, timeout);
+        // The search request is triggered
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              status: 'loading',
+              query: 'ab',
+            }),
+          })
+        );
 
+        userEvent.type(inputElement, '{esc}');
+
+        // The status is immediately set to "idle" and the panel is closed
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({
             state: expect.objectContaining({
+              status: 'idle',
               isOpen: false,
+              query: '',
+            }),
+          })
+        );
+
+        await defer(noop, timeout);
+
+        // Once the request is settled, the state remains unchanged
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
               status: 'idle',
+              isOpen: false,
             }),
           })
         );
-        expect(getSources).toHaveBeenCalledTimes(2);
+
+        expect(getSources).toHaveBeenCalledTimes(3);
       });
 
       test('keeps the panel closed on blur', async () => {
@@ -115,19 +146,46 @@ describe('concurrency', () => {
           getSources,
         });
 
-        userEvent.type(inputElement, 'a{enter}');
+        userEvent.type(inputElement, 'a');
+
+        await runAllMicroTasks();
+
+        // The search request is triggered
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              status: 'loading',
+              query: 'a',
+            }),
+          })
+        );
 
-        await defer(() => {}, timeout);
+        userEvent.type(inputElement, '{enter}');
 
+        // The status is immediately set to "idle" and the panel is closed
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({
             state: expect.objectContaining({
+              status: 'idle',
               isOpen: false,
+              query: 'a',
+            }),
+          })
+        );
+
+        await defer(noop, timeout);
+
+        // Once the request is settled, the state remains unchanged
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
               status: 'idle',
+              isOpen: false,
             }),
           })
         );
-        expect(getSources).toHaveBeenCalledTimes(1);
+
+        expect(getSources).toHaveBeenCalledTimes(2);
       });
 
       test('keeps the panel closed on touchstart blur', async () => {
@@ -156,19 +214,45 @@ describe('concurrency', () => {
         window.addEventListener('touchstart', onTouchStart);
 
         userEvent.type(inputElement, 'a');
+
+        await runAllMicroTasks();
+
+        // The search request is triggered
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              status: 'loading',
+              query: 'a',
+            }),
+          })
+        );
+
         const customEvent = new CustomEvent('touchstart', { bubbles: true });
         window.document.dispatchEvent(customEvent);
 
-        await defer(() => {}, timeout);
-
+        // The status is immediately set to "idle" and the panel is closed
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({
             state: expect.objectContaining({
+              status: 'idle',
               isOpen: false,
+              query: 'a',
+            }),
+          })
+        );
+
+        await defer(noop, timeout);
+
+        // Once the request is settled, the state remains unchanged
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
               status: 'idle',
+              isOpen: false,
             }),
           })
         );
+
         expect(getSources).toHaveBeenCalledTimes(1);
 
         window.removeEventListener('touchstart', onTouchStart);
@@ -197,7 +281,7 @@ describe('concurrency', () => {
 
         userEvent.type(inputElement, 'a{esc}');
 
-        await defer(() => {}, delay);
+        await defer(noop, delay);
 
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({
@@ -229,7 +313,7 @@ describe('concurrency', () => {
 
         userEvent.type(inputElement, 'a{enter}');
 
-        await defer(() => {}, delay);
+        await defer(noop, delay);
 
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({
@@ -276,7 +360,7 @@ describe('concurrency', () => {
         const customEvent = new CustomEvent('touchstart', { bubbles: true });
         window.document.dispatchEvent(customEvent);
 
-        await defer(() => {}, delay);
+        await defer(noop, delay);
 
         expect(onStateChange).toHaveBeenLastCalledWith(
           expect.objectContaining({

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

@@ -0,0 +1,99 @@
+import { noop } from '@algolia/autocomplete-shared';
+import userEvent from '@testing-library/user-event';
+
+import { createAutocomplete, InternalAutocompleteSource } from '..';
+import { createPlayground, createSource, defer } from '../../../../test/utils';
+
+type Source = InternalAutocompleteSource<{ label: string }>;
+
+const delay = 10;
+
+const debounced = debouncePromise<Source[][], Source[]>(
+  (items) => Promise.resolve(items),
+  delay
+);
+
+describe('debouncing', () => {
+  test('only submits the final query', async () => {
+    const onStateChange = jest.fn();
+    const getItems = jest.fn(({ query }) => [{ label: query }]);
+    const { inputElement } = createPlayground(createAutocomplete, {
+      onStateChange,
+      getSources: () => debounced([createSource({ getItems })]),
+    });
+
+    userEvent.type(inputElement, 'abc');
+
+    await defer(noop, delay);
+
+    expect(getItems).toHaveBeenCalledTimes(1);
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          status: 'idle',
+          isOpen: true,
+          collections: expect.arrayContaining([
+            expect.objectContaining({
+              items: [{ __autocomplete_id: 0, label: 'abc' }],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  test('triggers subsequent queries after reopening the panel', async () => {
+    const onStateChange = jest.fn();
+    const getItems = jest.fn(({ query }) => [{ label: query }]);
+    const { inputElement } = createPlayground(createAutocomplete, {
+      onStateChange,
+      getSources: () => debounced([createSource({ getItems })]),
+    });
+
+    userEvent.type(inputElement, 'abc{esc}');
+
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          status: 'idle',
+          isOpen: false,
+        }),
+      })
+    );
+
+    userEvent.type(inputElement, 'def');
+
+    await defer(noop, delay);
+
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          collections: expect.arrayContaining([
+            expect.objectContaining({
+              items: [{ __autocomplete_id: 0, label: 'abcdef' }],
+            }),
+          ]),
+          status: 'idle',
+          isOpen: true,
+        }),
+      })
+    );
+  });
+});
+
+function debouncePromise<TParams extends unknown[], TResponse>(
+  fn: (...params: TParams) => Promise<TResponse>,
+  time: number
+) {
+  let timerId: ReturnType<typeof setTimeout> | undefined = undefined;
+
+  return function (...args: TParams) {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    return new Promise<TResponse>((resolve) => {
+      timerId = setTimeout(() => resolve(fn(...args)), time);
+    });
+  };
+}

packages/autocomplete-core/src/createStore.ts

@@ -5,6 +5,7 @@ import {
   InternalAutocompleteOptions,
   Reducer,
 } from './types';
+import { createCancelablePromiseList } from './utils';
 
 type OnStoreStateChange<TItem extends BaseItem> = ({
   prevState,
@@ -35,6 +36,6 @@ export function createStore<TItem extends BaseItem>(
 
       onStoreStateChange({ state, prevState });
     },
-    shouldSkipPendingUpdate: false,
+    pendingRequests: createCancelablePromiseList(),
   };
 }

packages/autocomplete-core/src/getPropGetters.ts

@@ -43,13 +43,13 @@ export function getPropGetters<
         // The `onTouchStart` event shouldn't trigger the `blur` handler when
         // it's not an interaction with Autocomplete. We detect it with the
         // following heuristics:
-        // - the panel is closed AND there are no running requests
+        // - the panel is closed AND there are no pending requests
         //   (no interaction with the autocomplete, no future state updates)
         // - OR the touched target is the input element (should open the panel)
-        const isNotAutocompleteInteraction =
-          store.getState().isOpen === false && !onInput.isRunning();
+        const isAutocompleteInteraction =
+          store.getState().isOpen === true || !store.pendingRequests.isEmpty();
 
-        if (isNotAutocompleteInteraction || event.target === inputElement) {
+        if (!isAutocompleteInteraction || event.target === inputElement) {
           return;
         }
 
@@ -62,12 +62,12 @@ export function getPropGetters<
         if (isTargetWithinAutocomplete === false) {
           store.dispatch('blur', null);
 
-          // If requests are still running when the user closes the panel, they
+          // If requests are still pending when the user closes the panel, they
           // could reopen the panel once they resolve.
           // We want to prevent any subsequent query from reopening the panel
           // because it would result in an unsolicited UI behavior.
-          if (!props.debug && onInput.isRunning()) {
-            store.shouldSkipPendingUpdate = true;
+          if (!props.debug) {
+            store.pendingRequests.cancelAll();
           }
         }
       },
@@ -212,8 +212,8 @@ export function getPropGetters<
           // could reopen the panel once they resolve.
           // We want to prevent any subsequent query from reopening the panel
           // because it would result in an unsolicited UI behavior.
-          if (!props.debug && onInput.isRunning()) {
-            store.shouldSkipPendingUpdate = true;
+          if (!props.debug) {
+            store.pendingRequests.cancelAll();
           }
         }
       },