bug: Combobox now handles autocomplete correctly with new values

navikt · Oct 29, 2024 · 4196b08 · 4196b08
1 parent b5c7def
commit 4196b08
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 26 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", () => {

diff --git a/yarn.lock b/yarn.lock
@@ -3711,7 +3711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.3.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@npm:^7.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3742,8 +3742,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": "npm:^7.3.1"
-    "@navikt/ds-tokens": "npm:^7.3.1"
+    "@navikt/ds-css": "npm:^7.4.0"
+    "@navikt/ds-tokens": "npm:^7.4.0"
     concurrently: "npm:9.0.1"
     postcss-selector-parser: "npm:^6.0.13"
     postcss-value-parser: "npm:^4.2.0"
@@ -3758,7 +3758,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": "npm:7.3.1"
+    "@navikt/ds-css": "npm:7.4.0"
     axios: "npm:1.7.4"
     chalk: "npm:4.1.0"
     clipboardy: "npm:^2.3.0"
@@ -3779,11 +3779,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.3.1, @navikt/ds-css@npm:^7.3.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.4.0, @navikt/ds-css@npm:^7.4.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": "npm:^7.3.1"
+    "@navikt/ds-tokens": "npm:^7.4.0"
     autoprefixer: "npm:^10.4.20"
     cssnano: "npm:6.0.0"
     fast-glob: "npm:3.2.11"
@@ -3797,14 +3797,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.3.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.4.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": "npm:0.25.4"
     "@floating-ui/react-dom": "npm:^2.0.9"
-    "@navikt/aksel-icons": "npm:^7.3.1"
-    "@navikt/ds-tokens": "npm:^7.3.1"
+    "@navikt/aksel-icons": "npm:^7.4.0"
+    "@navikt/ds-tokens": "npm:^7.4.0"
     "@testing-library/dom": "npm:9.3.4"
     "@testing-library/jest-dom": "npm:^5.16.0"
     "@testing-library/react": "npm:^15.0.7"
@@ -3832,11 +3832,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@npm:^7.3.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@npm:^7.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": "npm:^7.3.1"
+    "@navikt/ds-tokens": "npm:^7.4.0"
     color: "npm:4.2.3"
     lodash: "npm:^4.17.21"
     tailwindcss: "npm:^3.3.3"
@@ -3846,7 +3846,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@npm:^7.3.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@npm:^7.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7729,11 +7729,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": "npm:^7.3.1"
-    "@navikt/ds-css": "npm:^7.3.1"
-    "@navikt/ds-react": "npm:^7.3.1"
-    "@navikt/ds-tailwind": "npm:^7.3.1"
-    "@navikt/ds-tokens": "npm:^7.3.1"
+    "@navikt/aksel-icons": "npm:^7.4.0"
+    "@navikt/ds-css": "npm:^7.4.0"
+    "@navikt/ds-react": "npm:^7.4.0"
+    "@navikt/ds-tailwind": "npm:^7.4.0"
+    "@navikt/ds-tokens": "npm:^7.4.0"
   languageName: unknown
   linkType: soft