diff --git a/.changeset/fifty-ghosts-poke.md b/.changeset/fifty-ghosts-poke.md new file mode 100644 index 0000000000..b83d38f649 --- /dev/null +++ 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 index 67cfbc2a35..b4e2c502dc 100644 --- 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( 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 index ba183c0e0b..7bc1d2f25a 100644 --- 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( + ({ + 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", () => {