Bugfix/combobox selecting autocompleted word is broken (#3110)

* Add test case for selecting autocompleted word after first character typed, which is currently broken (selects first in list, not the autocompleted word)

* Select the correct option when pressing enter after autocompleting a word in Combobox

Fixes #3106

* Added changeset

.changeset/yellow-crabs-remember.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Fixed bug in Combobox where the wrong option was selected on Enter if the autocompleted word was not the first in FilteredOptions

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -78,7 +78,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           const selectedValue =
             allowNewValues && isValueNew
               ? { label: value, value }
-              : filteredOptions[0];
+              : filteredOptionsUtil.getFirstValueStartingWith(
+                  value,
+                  filteredOptions,
+                ) || filteredOptions[0];
 
           if (!selectedValue) {
             return;

@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx

@@ -3,35 +3,32 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
-import { UNSAFE_Combobox } from "../index";
+import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [
-  "banana",
   "apple",
   "apple pie",
-  "tangerine",
-  "pear",
+  "banana",
   "grape",
+  "grape fruit",
   "kiwi",
   "mango",
   "passion fruit",
+  "pear",
   "pineapple",
   "strawberry",
+  "tangerine",
   "watermelon",
-  "grape fruit",
 ];
 
-const App = (props) => {
+const App = ({
+  label = "Hva er dine favorittfrukter?",
+  ...rest
+}: Omit<ComboboxProps, "label"> & { label?: ComboboxProps["label"] }) => {
   const id = useId();
   return (
     <div data-theme="light">
-      <UNSAFE_Combobox
-        label="Hva er dine favorittfrukter?"
-        size="medium"
-        variant="simple"
-        id={id}
-        {...props}
-      />
+      <UNSAFE_Combobox label={label} size="medium" id={id} {...rest} />
     </div>
   );
 };
@@ -260,5 +257,38 @@ describe("Render combobox", () => {
         ).toBe(true);
       });
     });
+
+    test("and pressing enter to select autocompleted word will select the correct word", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          onToggleSelected={onToggleSelected}
+          options={options}
+          shouldAutocomplete
+        />,
+      );
+
+      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");
+
+      await act(async () => {
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "passion fruit",
+        true,
+        false,
+      );
+    });
   });
 });