fix: pass string onChange when value is string for selects (#726)

src/components/Combobox/Common/useCombobox.tsx

@@ -6,7 +6,6 @@ import {
 import { FocusEvent, useState } from "react";
 
 import { Option, SingleChangeHandler } from "~/components/BaseSelect";
-import { isString } from "~/utils";
 
 const getItemsFilter = <T extends Option>(
   inputValue: string | undefined,
@@ -26,13 +25,15 @@ const getItemsFilter = <T extends Option>(
 export const useCombobox = <T extends Option, V extends string | Option>({
   selectedItem,
   options,
+  isValuePassedAsString,
   onChange,
   onInputValueChange,
   onFocus,
   onBlur,
 }: {
   selectedItem: T | null | undefined;
   options: T[];
+  isValuePassedAsString: boolean;
   onChange?: SingleChangeHandler<V | null>;
   onInputValueChange?: (value: string) => void;
   onFocus?: (e: FocusEvent<HTMLInputElement, Element>) => void;
@@ -58,7 +59,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     selectedItem,
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
-        const selectedValue = isString(selectedItem)
+        const selectedValue = isValuePassedAsString
           ? selectedItem.value
           : selectedItem;
         onChange?.(selectedValue as V);

src/components/Combobox/Dynamic/DynamicCombobox.tsx

@@ -99,6 +99,7 @@ const DynamicComboboxInner = <T extends Option>(
   } = useCombobox({
     selectedItem: value,
     options,
+    isValuePassedAsString: false,
     onChange,
     onInputValueChange,
     onFocus,

src/components/Combobox/Static/Combobox.tsx

@@ -72,6 +72,8 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
   }: ComboboxProps<T, V>,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
+  const isValuePassedAsString = isString(value);
+
   const {
     active,
     typed,
@@ -85,9 +87,10 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     itemsToSelect,
     hasItemsToSelect,
   } = useCombobox({
-    selectedItem: isString(value)
+    selectedItem: isValuePassedAsString
       ? options.find((option) => option.value === value)
       : value,
+    isValuePassedAsString,
     options,
     onChange,
     onFocus,

src/components/Multiselect/Common/useMultiselect.tsx

@@ -79,7 +79,7 @@ export const useMultiselect = <T extends Option, V extends Option | string>({
           case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
           case useMultipleSelection.stateChangeTypes
             .FunctionRemoveSelectedItem: {
-            const selected = isStringArray(selectedItems)
+            const selected = isStringArray(selectedValues)
               ? newSelectedItems?.map((item) => item.value)
               : newSelectedItems;
             onChange?.(selected as V[]);
@@ -130,7 +130,7 @@ export const useMultiselect = <T extends Option, V extends Option | string>({
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
           if (newSelectedItem) {
-            const selected = isStringArray(selectedItems)
+            const selected = isStringArray(selectedValues)
               ? [...selectedItems.map((i) => i.value), newSelectedItem.value]
               : [...selectedItems, newSelectedItem];
             onChange?.(selected as V[]);

src/components/Select/Select.tsx

@@ -79,6 +79,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
   }: SelectProps<T, V>,
   ref: ForwardedRef<HTMLElement>
 ) => {
+  const isValuePassedAsString = isString(value);
   const {
     active,
     typed,
@@ -91,9 +92,10 @@ const SelectInner = <T extends Option, V extends Option | string>(
     highlightedIndex,
     hasItemsToSelect,
   } = useSelect({
-    value: isString(value)
+    value: isValuePassedAsString
       ? options.find((item) => item.value === value)
       : value,
+    isValuePassedAsString,
     options,
     onChange,
     onFocus,

src/components/Select/useSelect.tsx

@@ -5,19 +5,19 @@ import {
 } from "downshift";
 import { FocusEvent, useState } from "react";
 
-import { isString } from "~/utils";
-
 import { Option } from "../BaseSelect";
 import { SelectProps } from "./Select";
 
 export const useSelect = <T extends Option, V extends string | Option>({
   value,
+  isValuePassedAsString,
   options,
   onChange,
   onFocus,
   onBlur,
 }: {
   value: T | null | undefined;
+  isValuePassedAsString: boolean;
   options: T[];
   onChange?: SelectProps<T, V>["onChange"];
   onFocus?: (e: FocusEvent<HTMLElement, Element>) => void;
@@ -40,7 +40,7 @@ export const useSelect = <T extends Option, V extends string | Option>({
     itemToString: (item) => item?.label ?? "",
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
-        const selectedValue = isString(selectedItem)
+        const selectedValue = isValuePassedAsString
           ? selectedItem.value
           : selectedItem;
         onChange?.(selectedValue as V);