fix-302

src/ts/components/core/combobox/MultiSelect.tsx

@@ -56,7 +56,7 @@ const MultiSelect = (props: Props) => {
     useDidUpdate(() => {
         setOptions(data);
         const filteredSelected = filterSelected(data, selected);
-        setSelected(filteredSelected);
+        setSelected(filteredSelected ?? []);
     }, [data]);
 
     useDidUpdate(() => {
@@ -68,7 +68,7 @@ const MultiSelect = (props: Props) => {
     }, [selected]);
 
     useDidUpdate(() => {
-        setSelected(value);
+        setSelected(value ?? [])
     }, [value]);
 
     useDidUpdate(() => {
@@ -92,6 +92,7 @@ MultiSelect.defaultProps = {
     persisted_props: ["value"],
     persistence_type: "local",
     data: [],
+    value: [],
 };
 
 export default MultiSelect;

src/ts/components/core/combobox/Select.tsx

@@ -8,7 +8,7 @@ import { __BaseInputProps } from "props/input";
 import { ScrollAreaProps } from "props/scrollarea";
 import { StylesApiProps } from "props/styles";
 import React, { useState } from "react";
-import { isInOption } from "../../../utils/combobox";
+import { filterSelected } from "../../../utils/combobox";
 
 interface Props
     extends BoxProps,
@@ -51,9 +51,8 @@ const Select = (props: Props) => {
 
     useDidUpdate(() => {
         setOptions(data);
-        if (!isInOption(data, selected)) {
-            setSelected(null);
-        }
+        const filteredSelected = filterSelected(data, selected);
+        setSelected(filteredSelected);
     }, [data]);
 
     useDidUpdate(() => {

src/ts/components/core/combobox/TagsInput.tsx

@@ -55,7 +55,7 @@ const TagsInput = (props: Props) => {
     useDidUpdate(() => {
         setOptions(data);
         const filteredSelected = filterSelected(data, selected);
-        setSelected(filteredSelected);
+        setSelected(filteredSelected ?? []);
     }, [data]);
 
     useDidUpdate(() => {
@@ -67,7 +67,7 @@ const TagsInput = (props: Props) => {
     }, [selected]);
 
     useDidUpdate(() => {
-        setSelected(value);
+        setSelected(value ?? []);
     }, [value]);
 
     useDidUpdate(() => {
@@ -91,6 +91,7 @@ TagsInput.defaultProps = {
     persisted_props: ["value"],
     persistence_type: "local",
     data: [],
+    value: [],
 };
 
 export default TagsInput;

src/ts/utils/combobox.ts

@@ -1,18 +1,17 @@
 export const filterSelected = (options, values) => {
-    if (!options || !values || options.length === 0 || values.length === 0) return [];
+    if (!options || options.length === 0 || values === null || values === undefined) {
+        return  null;
+    }
 
     const extractValues = (optionList) => {
         let extractedValues = [];
 
         for (const option of optionList) {
             if (typeof option === "string") {
-                // Case 1: option is a string
                 extractedValues.push(option);
             } else if ('value' in option && 'label' in option) {
-                // Case 2: option is an object with label and value
                 extractedValues.push(option.value);
             } else if ('group' in option && 'items' in option) {
-                // Case 3: option is a group with nested items, recursively extract values
                 extractedValues = extractedValues.concat(extractValues(option.items));
             }
         }
@@ -23,19 +22,11 @@ export const filterSelected = (options, values) => {
     // Extract all valid option values
     const optionValues = extractValues(options);
 
-    // Return filtered values based on extracted option values
-    return values.filter((value) => optionValues.includes(value));
-};
-
-
-export const isInOption = (options, value) => {
-    if (options.length === 0) return false;
-
-    if (typeof options[0] === "string") {
-        return options.includes(value);
-    } else if (typeof options[0] === "object") {
-        const optionValues = options.map((option) => option.value);
-        return optionValues.includes(value);
+    if (Array.isArray(values)) {
+        // Return filtered array if values is an array (for MultiSelect and TagsInput)
+        return values.filter((value) => optionValues.includes(value));
+    } else {
+        // Return a single value if values is not an array (for Select)
+        return optionValues.includes(values) ? values : null;
     }
-    return false;
 };