diff --git a/.changeset/three-peaches-fold.md b/.changeset/three-peaches-fold.md new file mode 100644 index 0000000000..706f274dce --- /dev/null +++ b/.changeset/three-peaches-fold.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Combobox: Pressing 'Enter' after canceling autocomplete could result in using matching options in list. diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx index b4e2c502dc..6339b0d183 100644 --- a/@navikt/core/react/src/form/combobox/Input/Input.tsx +++ b/@navikt/core/react/src/form/combobox/Input/Input.tsx @@ -100,9 +100,22 @@ const Input = forwardRef( value, filteredOptions, ); + + /* + * User can have matching results, while not using the autocomplete result + * E.g. User types "Oslo", list has is "Oslo kommune", but user hits backspace, canceling autocomplete. + */ + const autoCompleteMatchesValue = + filteredOptionsUtil.normalizeText(value) === + filteredOptionsUtil.normalizeText(autoCompletedOption?.label ?? ""); + let selectedValue: ComboboxOption | undefined; - if (shouldAutocomplete && autoCompletedOption) { + if ( + shouldAutocomplete && + autoCompletedOption && + autoCompleteMatchesValue + ) { selectedValue = autoCompletedOption; } else if (allowNewValues && isValueNew) { selectedValue = { label: value, value }; diff --git a/yarn.lock b/yarn.lock index bfd30d5a55..8a6e93108c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3711,7 +3711,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@npm:^7.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@npm:^7.4.1, @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.4.0" - "@navikt/ds-tokens": "npm:^7.4.0" + "@navikt/ds-css": "npm:^7.4.1" + "@navikt/ds-tokens": "npm:^7.4.1" 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.4.0" + "@navikt/ds-css": "npm:7.4.1" 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.4.0, @navikt/ds-css@npm:^7.4.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.4.1, @navikt/ds-css@npm:^7.4.1, @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.4.0" + "@navikt/ds-tokens": "npm:^7.4.1" 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.4.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.4.1, @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.4.0" - "@navikt/ds-tokens": "npm:^7.4.0" + "@navikt/aksel-icons": "npm:^7.4.1" + "@navikt/ds-tokens": "npm:^7.4.1" "@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.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@npm:^7.4.1, @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.4.0" + "@navikt/ds-tokens": "npm:^7.4.1" 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.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@npm:^7.4.1, @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.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" + "@navikt/aksel-icons": "npm:^7.4.1" + "@navikt/ds-css": "npm:^7.4.1" + "@navikt/ds-react": "npm:^7.4.1" + "@navikt/ds-tailwind": "npm:^7.4.1" + "@navikt/ds-tokens": "npm:^7.4.1" languageName: unknown linkType: soft