From 17e71b3f44ed4644de6415e1bff8abd76b6ad198 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Fri, 6 Dec 2024 13:32:42 +0100
Subject: [PATCH] Combobox: Fix issue where you could select more options than
 defined in maxSelected

---
 .changeset/nasty-avocados-poke.md              |  5 +++++
 .../react/src/form/combobox/Input/Input.tsx    | 18 +++++++++---------
 .../SelectedOptions/selectedOptionsContext.tsx |  4 ++++
 3 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/nasty-avocados-poke.md

diff --git a/.changeset/nasty-avocados-poke.md b/.changeset/nasty-avocados-poke.md
new file mode 100644
index 0000000000..9ab442b8b2
--- /dev/null
+++ b/.changeset/nasty-avocados-poke.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: Fix issue where you could select more options than defined in maxSelected
diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx
index 6339b0d183..7995a97267 100644
--- a/@navikt/core/react/src/form/combobox/Input/Input.tsx
+++ b/@navikt/core/react/src/form/combobox/Input/Input.tsx
@@ -75,7 +75,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
-        const isTextInSelectedOptions = (text: string) =>
+        const isSelected = (text: string) =>
           selectedOptions.some(
             (option) =>
               option.label.toLocaleLowerCase() === text.toLocaleLowerCase(),
@@ -85,10 +85,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
+          if (!isMultiSelect && !isSelected(currentOption.label)) {
             toggleIsListOpen(false);
           }
-        } else if (isTextInSelectedOptions(value)) {
+        } else if (isSelected(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
@@ -109,23 +109,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             filteredOptionsUtil.normalizeText(value) ===
             filteredOptionsUtil.normalizeText(autoCompletedOption?.label ?? "");
 
-          let selectedValue: ComboboxOption | undefined;
+          let optionToToggle: ComboboxOption | undefined;
 
           if (
             shouldAutocomplete &&
             autoCompletedOption &&
             autoCompleteMatchesValue
           ) {
-            selectedValue = autoCompletedOption;
+            optionToToggle = autoCompletedOption;
           } else if (allowNewValues && isValueNew) {
-            selectedValue = { label: value, value };
+            optionToToggle = { label: value, value };
           }
 
-          if (!selectedValue) {
+          if (!optionToToggle) {
             return;
           }
-          toggleOption(selectedValue, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
+          toggleOption(optionToToggle, event);
+          if (!isMultiSelect && !isSelected(optionToToggle.label)) {
             toggleIsListOpen(false);
           }
         }
diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
index ad0123b7af..2d6876414c 100644
--- a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
+++ b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
@@ -117,6 +117,8 @@ const SelectedOptionsProvider = ({
     ) => {
       if (isInList(option.value, selectedOptions)) {
         removeSelectedOption(option);
+      } else if (isMultiSelect && isLimitReached) {
+        return;
       } else {
         addSelectedOption(option);
       }
@@ -129,6 +131,8 @@ const SelectedOptionsProvider = ({
       focusInput,
       removeSelectedOption,
       selectedOptions,
+      isLimitReached,
+      isMultiSelect,
     ],
   );