Combobox: Fix issue where you could select more options than defined …

…in maxSelected
navikt · Dec 6, 2024 · 17e71b3 · 17e71b3
1 parent 13a9a21
commit 17e71b3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/nasty-avocados-poke.md 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
@@ -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
@@ -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,
     ],
   );