Fix Select/SelectMulti toggling from the caret icon (#1248)

Author: mdodgelooker

CHANGELOG.md

@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- `Select`/`SelectMulti` toggling the list from the caret
 - `Select` and `SelectMulti` keyboard navigation issues when filtering options
 - `SelectMulti` with `freeInput` tokenizing the input value when an option is clicked
 - `Tabs` now can be controlled

packages/components/src/Form/Inputs/Combobox/utils/useBlur.ts

@@ -68,15 +68,15 @@ export function useBlur<
     }
     // we on want to close only if focus rests outside the select
     const popoverCurrent = listRef ? listRef.current : null
-    if (e.relatedTarget !== inputElement && popoverCurrent) {
+    if (popoverCurrent) {
       const focusInList =
         popoverCurrent && popoverCurrent.contains(e.relatedTarget as Node)
 
       requestAnimationFrame(() => {
         if (focusInList && state !== ComboboxState.INTERACTING) {
           // focus landed inside the select, keep it open
           transition && transition(ComboboxActionType.INTERACT)
-        } else if (!focusInList) {
+        } else if (!focusInList && document.activeElement !== inputElement) {
           // focus landed outside the select, close it
           closeList()
         }

packages/components/src/Form/Inputs/InputChips/InputChips.tsx

@@ -141,7 +141,9 @@ export const InputChipsInternal = forwardRef(
       if (!isControlled) {
         setUncontrolledValue(val)
       }
-      onInputChange && onInputChange(val)
+      if (val !== inputValue) {
+        onInputChange && onInputChange(val)
+      }
     }
 
     function updateValues(newInputValue?: string) {
@@ -150,12 +152,7 @@ export const InputChipsInternal = forwardRef(
         invalidValues,
         unusedValues,
         validValues,
-      } = getUpdatedValues(
-        // TypeScript can't tell that inputValue won't be undefined
-        newInputValue || inputValue,
-        values,
-        validate
-      )
+      } = getUpdatedValues(newInputValue || inputValue, values, validate)
 
       // Save valid values and keep invalid ones in the input
       const updatedInputValue = unusedValues.join(', ')