fix(concurrency): ensure panel stays closed after blur

bundlesize.config.json

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

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

@@ -1,13 +1,17 @@
 import userEvent from '@testing-library/user-event';
 
 import { AutocompleteState } from '..';
-import { createSource, defer } from '../../../../test/utils';
+import { createPlayground, createSource, defer } from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 type Item = {
   label: string;
 };
 
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
 describe('concurrency', () => {
   test('resolves the responses in order from getSources', async () => {
     // These delays make the second query come back after the third one.
@@ -91,4 +95,237 @@ describe('concurrency', () => {
 
     document.body.removeChild(input);
   });
+
+  describe('closing the panel with pending requests', () => {
+    describe('without debug mode', () => {
+      const delay = 300;
+
+      test('keeps the panel closed on Escape', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const { inputElement } = createPlayground(createAutocomplete, {
+          onStateChange,
+          getSources,
+        });
+
+        userEvent.type(inputElement, 'a{esc}');
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: false,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+      });
+
+      test('keeps the panel closed on blur', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const { inputElement } = createPlayground(createAutocomplete, {
+          onStateChange,
+          getSources,
+        });
+
+        userEvent.type(inputElement, 'a{enter}');
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: false,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+      });
+
+      test('keeps the panel closed on touchstart blur', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const {
+          getEnvironmentProps,
+          inputElement,
+          formElement,
+        } = createPlayground(createAutocomplete, {
+          onStateChange,
+          getSources,
+        });
+
+        const panelElement = document.createElement('div');
+
+        const { onTouchStart } = getEnvironmentProps({
+          inputElement,
+          formElement,
+          panelElement,
+        });
+        window.addEventListener('touchstart', onTouchStart);
+
+        userEvent.type(inputElement, 'a');
+        const customEvent = new CustomEvent('touchstart', { bubbles: true });
+        window.document.dispatchEvent(customEvent);
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: false,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+
+        window.removeEventListener('touchstart', onTouchStart);
+      });
+    });
+
+    describe('with debug mode', () => {
+      const delay = 300;
+
+      test('keeps the panel closed on Escape', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const { inputElement } = createPlayground(createAutocomplete, {
+          debug: true,
+          onStateChange,
+          getSources,
+        });
+
+        userEvent.type(inputElement, 'a{esc}');
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: false,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+      });
+
+      test('keeps the panel open on blur', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const { inputElement } = createPlayground(createAutocomplete, {
+          debug: true,
+          onStateChange,
+          getSources,
+        });
+
+        userEvent.type(inputElement, 'a{enter}');
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: true,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+      });
+
+      test('keeps the panel open on touchstart blur', async () => {
+        const onStateChange = jest.fn();
+        const getSources = jest.fn(() => {
+          return defer(() => {
+            return [
+              createSource({
+                getItems: () => [{ label: '1' }, { label: '2' }],
+              }),
+            ];
+          }, delay);
+        });
+        const {
+          getEnvironmentProps,
+          inputElement,
+          formElement,
+        } = createPlayground(createAutocomplete, {
+          debug: true,
+          onStateChange,
+          getSources,
+        });
+
+        const panelElement = document.createElement('div');
+
+        const { onTouchStart } = getEnvironmentProps({
+          inputElement,
+          formElement,
+          panelElement,
+        });
+        window.addEventListener('touchstart', onTouchStart);
+
+        userEvent.type(inputElement, 'a');
+        const customEvent = new CustomEvent('touchstart', { bubbles: true });
+        window.document.dispatchEvent(customEvent);
+
+        await defer(() => {}, delay);
+
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            state: expect.objectContaining({
+              isOpen: true,
+              status: 'idle',
+            }),
+          })
+        );
+        expect(getSources).toHaveBeenCalledTimes(1);
+
+        window.removeEventListener('touchstart', onTouchStart);
+      });
+    });
+  });
 });

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

@@ -30,7 +30,7 @@ describe('getEnvironmentProps', () => {
   });
 
   describe('onTouchStart', () => {
-    test('is a noop when panel is not open', () => {
+    test('is a noop when panel is not open and status is idle', () => {
       const onStateChange = jest.fn();
       const {
         getEnvironmentProps,

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

@@ -1894,7 +1894,7 @@ describe('getInputProps', () => {
   });
 
   describe('onBlur', () => {
-    test('resets activeItemId and isOpen', () => {
+    test('resets activeItemId and isOpen', async () => {
       const onStateChange = jest.fn();
       const { inputElement } = createPlayground(createAutocomplete, {
         onStateChange,
@@ -1905,6 +1905,8 @@ describe('getInputProps', () => {
       inputElement.focus();
       inputElement.blur();
 
+      await runAllMicroTasks();
+
       expect(onStateChange).toHaveBeenLastCalledWith(
         expect.objectContaining({
           state: expect.objectContaining({

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

@@ -8,6 +8,10 @@ import {
 import { createAutocomplete } from '../createAutocomplete';
 import * as handlers from '../onInput';
 
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
 describe('getSources', () => {
   test('gets calls on input', () => {
     const getSources = jest.fn((..._args: any[]) => {
@@ -140,7 +144,13 @@ describe('getSources', () => {
 
     const { inputElement } = createPlayground(createAutocomplete, {
       getSources() {
-        return [createSource({ sourceId: 'source1', getItems: () => {} })];
+        return [
+          createSource({
+            sourceId: 'source1',
+            // @ts-expect-error
+            getItems: () => {},
+          }),
+        ];
       },
     });
 

packages/autocomplete-core/src/getPropGetters.ts

@@ -41,7 +41,7 @@ export function getPropGetters<
       // Right now, a second instance makes this computation return false.
       onTouchStart(event) {
         if (
-          store.getState().isOpen === false ||
+          (store.getState().isOpen === false && !onInput.isRunning()) ||
           event.target === inputElement
         ) {
           return;
@@ -55,6 +55,18 @@ export function getPropGetters<
 
         if (isTargetWithinAutocomplete === false) {
           store.dispatch('blur', null);
+
+          if (!props.debug && onInput.isRunning()) {
+            onInput({
+              event: new Event('blur'),
+              props,
+              nextState: { isOpen: false, activeItemId: null },
+              query: store.getState().query,
+              refresh,
+              store,
+              ...setters,
+            });
+          }
         }
       },
       // When scrolling on touch devices (mobiles, tablets, etc.), we want to
@@ -193,6 +205,18 @@ export function getPropGetters<
         // See explanation in `onTouchStart`.
         if (!isTouchDevice) {
           store.dispatch('blur', null);
+
+          if (!props.debug && onInput.isRunning()) {
+            onInput({
+              event: new Event('blur'),
+              props,
+              nextState: { isOpen: false, activeItemId: null },
+              query: store.getState().query,
+              refresh,
+              store,
+              ...setters,
+            });
+          }
         }
       },
       onClick: (event) => {