From 35f7355233db24cd42ef16b93db78ece4b539cbd Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:56:16 +0100
Subject: [PATCH] bug: Checks if autocomplete should actually be used when
 pressing enter (#3306)

---
 .changeset/three-peaches-fold.md              |  5 +++
 .../react/src/form/combobox/Input/Input.tsx   | 15 +++++++-
 yarn.lock                                     | 34 +++++++++----------
 3 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/three-peaches-fold.md

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<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 };
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