diff --git a/.changeset/yellow-crabs-remember.md b/.changeset/yellow-crabs-remember.md new file mode 100644 index 0000000000..ea5b56160c --- /dev/null +++ b/.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 diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx index 34db0ac86c..cd66327fc8 100644 --- a/@navikt/core/react/src/form/combobox/Input/Input.tsx +++ b/@navikt/core/react/src/form/combobox/Input/Input.tsx @@ -78,7 +78,10 @@ const Input = forwardRef( const selectedValue = allowNewValues && isValueNew ? { label: value, value } - : filteredOptions[0]; + : filteredOptionsUtil.getFirstValueStartingWith( + value, + filteredOptions, + ) || filteredOptions[0]; if (!selectedValue) { return; diff --git a/@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx b/@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx index efce009c24..26d76384b7 100644 --- a/@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx +++ b/@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 & { label?: ComboboxProps["label"] }) => { const id = useId(); return (
- +
); }; @@ -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( + , + ); + + 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, + ); + }); }); });