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", () => { diff --git a/yarn.lock b/yarn.lock index 89c4a90d32..bfd30d5a55 100644 --- 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