fix: update Multiselect component to use 'values' prop instead of 'va…

…lue' (#2640)
langflow-ai · Jul 11, 2024 · 7d75027 · 7d75027
1 parent 52db335
commit 7d75027
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/backend/base/langflow/inputs/inputs.py b/src/backend/base/langflow/inputs/inputs.py
@@ -304,6 +304,7 @@ class MultiselectInput(BaseInputMixin, ListableInputMixin, DropDownMixin, Metada
 
     field_type: Optional[SerializableFieldTypes] = FieldTypes.TEXT
     options: list[str] = Field(default_factory=list)
+    is_list: bool = Field(default=True, serialization_alias="list")
 
 
 class FileInput(BaseInputMixin, ListableInputMixin, FileMixin, MetadataTraceMixin):

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -529,6 +529,7 @@ export default function ParameterComponent({
           condition={
             left === true &&
             type === "str" &&
+            !data.node?.template[name]?.list &&
             (data.node?.template[name]?.options ||
               data.node?.template[name]?.real_time_refresh)
           }
@@ -570,7 +571,7 @@ export default function ParameterComponent({
             <Multiselect
               disabled={disabled}
               options={data?.node?.template?.[name]?.options || []}
-              value={data?.node?.template?.[name]?.value || []}
+              values={data?.node?.template?.[name]?.value || []}
               id={"multiselect-" + name}
               onValueChange={handleOnNewValue}
             />

diff --git a/src/frontend/src/components/multiselectComponent/index.tsx b/src/frontend/src/components/multiselectComponent/index.tsx
@@ -109,7 +109,7 @@ interface MultiselectProps<T>
   asChild?: boolean;
   className?: string;
   editNode?: boolean;
-  value?: T[];
+  values?: T[];
 }
 
 export const Multiselect = forwardRef<
@@ -125,18 +125,23 @@ export const Multiselect = forwardRef<
       asChild = false,
       className,
       editNode = false,
-      value,
+      values,
       ...props
     },
     ref,
   ) => {
+    // if elements in values are strings, create the multiselectValue object
+    // otherwise, use the values as is
+    const value = values?.map((v) =>
+      typeof v === "string" ? { label: v, value: v } : v,
+    );
+
     const [selectedValues, setSelectedValues] = useState<MultiselectValue[]>(
       value || [],
     );
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
     const combinedRef = useMergeRefs<HTMLButtonElement>(ref);
-
     useEffect(() => {
       if (!!value && value?.length > 0 && !isEqual(selectedValues, value)) {
         setSelectedValues(value);
@@ -264,7 +269,7 @@ export const Multiselect = forwardRef<
             <CommandList>
               <CommandEmpty>No results found.</CommandEmpty>
               <CommandGroup>
-                {options?.map((option) => {
+                {value?.map((option) => {
                   const isSelected = !!selectedValues.find(
                     (sv) => sv.value === option.value,
                   );