fix(completion): prevent error when getting activeItem with an empty collection (#623)

Author: shortcuts

bundlesize.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "packages/autocomplete-core/dist/umd/index.production.js",
-      "maxSize": "5.25 kB"
+      "maxSize": "5.5 kB"
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",

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

@@ -1,6 +1,10 @@
 import userEvent from '@testing-library/user-event';
 
-import { createCollection, createPlayground } from '../../../../test/utils';
+import {
+  createCollection,
+  createPlayground,
+  runAllMicroTasks,
+} from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 describe('completion', () => {
@@ -55,6 +59,33 @@ describe('completion', () => {
     );
   });
 
+  test('does not throw without collections with panel open', async () => {
+    const onStateChange = jest.fn();
+    const { inputElement } = createPlayground(createAutocomplete, {
+      onStateChange,
+      openOnFocus: true,
+      initialState: {
+        collections: [],
+      },
+      shouldPanelOpen() {
+        return true;
+      },
+    });
+
+    inputElement.focus();
+    await runAllMicroTasks();
+
+    userEvent.type(inputElement, '{arrowup}');
+    await runAllMicroTasks();
+    expect(onStateChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        state: expect.objectContaining({
+          completion: null,
+        }),
+      })
+    );
+  });
+
   test('does not set completion when panel is closed', () => {
     const onStateChange = jest.fn();
     const { inputElement } = createPlayground(createAutocomplete, {

packages/autocomplete-core/src/getCompletion.ts

@@ -12,7 +12,5 @@ export function getCompletion<TItem extends BaseItem>({
     return null;
   }
 
-  const { itemInputValue } = getActiveItem(state)!;
-
-  return itemInputValue || null;
+  return getActiveItem(state)?.itemInputValue || null;
 }

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

@@ -20,6 +20,10 @@ export function getNextActiveItemId(
   itemCount: number,
   defaultActiveItemId: number | null
 ): number | null {
+  if (!itemCount) {
+    return null;
+  }
+
   if (
     moveAmount < 0 &&
     (baseIndex === null || (defaultActiveItemId !== null && baseIndex === 0))