Skip to content

Commit

Permalink
bug: Checks if autocomplete should actually be used when pressing enter
Browse files Browse the repository at this point in the history
  • Loading branch information
KenAJoh committed Oct 30, 2024
1 parent bbc06a3 commit b72a899
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 18 deletions.
5 changes: 5 additions & 0 deletions .changeset/three-peaches-fold.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@navikt/ds-react": patch
---

Combobox: Pressing 'Enter' after canceling autocomplete could result in using matching options in list.
15 changes: 14 additions & 1 deletion @navikt/core/react/src/form/combobox/Input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
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 };
Expand Down
34 changes: 17 additions & 17 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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:
Expand Down Expand Up @@ -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

Expand Down

0 comments on commit b72a899

Please sign in to comment.