bug: Combobox now handles autocomplete correctly with new values (#3287)

navikt · Oct 30, 2024 · 3c53127 · 3c53127
1 parent 561dd2e
commit 3c53127
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 9 deletions.
diff --git a/.changeset/fifty-ghosts-poke.md b/.changeset/fifty-ghosts-poke.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: onToggleSelected is now called with correct value when autocomplete and new values are allowed.
diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx
@@ -11,6 +11,7 @@ import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { ComboboxOption } from "../types";
 import { useInputContext } from "./Input.context";
 
 interface InputProps
@@ -93,19 +94,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           clearInput(event);
         } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
           event.preventDefault();
-          // Autocompleting or adding a new value
-          const selectedValue =
-            allowNewValues && isValueNew
-              ? { label: value, value }
-              : filteredOptionsUtil.getFirstValueStartingWith(
-                  value,
-                  filteredOptions,
-                ) || filteredOptions[0];
+
+          const autoCompletedOption =
+            filteredOptionsUtil.getFirstValueStartingWith(
+              value,
+              filteredOptions,
+            );
+          let selectedValue: ComboboxOption | undefined;
+
+          if (shouldAutocomplete && autoCompletedOption) {
+            selectedValue = autoCompletedOption;
+          } else if (allowNewValues && isValueNew) {
+            selectedValue = { label: value, value };
+          }
 
           if (!selectedValue) {
             return;
           }
-
           toggleOption(selectedValue, event);
           if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
             toggleIsListOpen(false);

diff --git a/@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx b/@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx
@@ -290,6 +290,45 @@ describe("Render combobox", () => {
         false,
       );
     });
+
+    test("and pressing enter to select autocompleted word will select existing word when addNewOptions is true", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          onToggleSelected={onToggleSelected}
+          options={options.map((opt) => ({
+            label: `${opt} (${opt})`,
+            value: opt,
+          }))}
+          shouldAutocomplete
+          allowNewValues
+        />,
+      );
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      expect(combobox.getAttribute("value")).toBe(
+        "passion fruit (passion fruit)",
+      );
+
+      await act(async () => {
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "passion fruit",
+        true,
+        false,
+      );
+    });
   });
 
   describe("has keyboard navigation", () => {