fix(core): don't open panel with openOnFocus without items

algolia · Feb 5, 2021 · fde8b8a · fde8b8a
1 parent 11e5667
commit fde8b8a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/packages/autocomplete-core/src/__tests__/openOnFocus.test.ts b/packages/autocomplete-core/src/__tests__/openOnFocus.test.ts
@@ -1,8 +1,18 @@
-import { createSource, createPlayground } from '../../../../test/utils';
+import userEvent from '@testing-library/user-event';
+
+import {
+  createSource,
+  createPlayground,
+  runAllMicroTasks,
+} from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
+import { BaseItem } from '../types/AutocompleteApi';
+import { AutocompleteOptions } from '../types/AutocompleteOptions';
 
 describe('openOnFocus', () => {
-  function setupTest(props) {
+  function setupTest<TItem extends BaseItem>(
+    props: Partial<AutocompleteOptions<TItem>>
+  ) {
     return createPlayground(createAutocomplete, {
       openOnFocus: true,
       defaultActiveItemId: 0,
@@ -96,4 +106,36 @@ describe('openOnFocus', () => {
       })
     );
   });
+
+  test('does not open panel after getSources() without items', async () => {
+    const onStateChange = jest.fn();
+    const { inputElement } = setupTest({
+      onStateChange,
+      getSources() {
+        return [];
+      },
+    });
+
+    inputElement.focus();
+    await runAllMicroTasks();
+
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          isOpen: false,
+        }),
+      })
+    );
+
+    userEvent.type(inputElement, 'a{backspace}');
+    await runAllMicroTasks();
+
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          isOpen: false,
+        }),
+      })
+    );
+  });
 });
diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts
@@ -120,7 +120,9 @@ export function onInput<TItem extends BaseItem>({
           setCollections(collections as any);
           setIsOpen(
             nextState.isOpen ??
-              ((!query && props.openOnFocus) ||
+              ((props.openOnFocus &&
+                !query &&
+                props.shouldPanelShow({ state: store.getState() })) ||
                 props.shouldPanelShow({ state: store.getState() }))
           );