fix: update Multiselect component to use 'values' prop instead of 'value' (#2640)
This commit is contained in:
parent
52db335b51
commit
7d7502744e
3 changed files with 12 additions and 5 deletions
|
|
@ -304,6 +304,7 @@ class MultiselectInput(BaseInputMixin, ListableInputMixin, DropDownMixin, Metada
|
||||||
|
|
||||||
field_type: Optional[SerializableFieldTypes] = FieldTypes.TEXT
|
field_type: Optional[SerializableFieldTypes] = FieldTypes.TEXT
|
||||||
options: list[str] = Field(default_factory=list)
|
options: list[str] = Field(default_factory=list)
|
||||||
|
is_list: bool = Field(default=True, serialization_alias="list")
|
||||||
|
|
||||||
|
|
||||||
class FileInput(BaseInputMixin, ListableInputMixin, FileMixin, MetadataTraceMixin):
|
class FileInput(BaseInputMixin, ListableInputMixin, FileMixin, MetadataTraceMixin):
|
||||||
|
|
|
||||||
|
|
@ -529,6 +529,7 @@ export default function ParameterComponent({
|
||||||
condition={
|
condition={
|
||||||
left === true &&
|
left === true &&
|
||||||
type === "str" &&
|
type === "str" &&
|
||||||
|
!data.node?.template[name]?.list &&
|
||||||
(data.node?.template[name]?.options ||
|
(data.node?.template[name]?.options ||
|
||||||
data.node?.template[name]?.real_time_refresh)
|
data.node?.template[name]?.real_time_refresh)
|
||||||
}
|
}
|
||||||
|
|
@ -570,7 +571,7 @@ export default function ParameterComponent({
|
||||||
<Multiselect
|
<Multiselect
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
options={data?.node?.template?.[name]?.options || []}
|
options={data?.node?.template?.[name]?.options || []}
|
||||||
value={data?.node?.template?.[name]?.value || []}
|
values={data?.node?.template?.[name]?.value || []}
|
||||||
id={"multiselect-" + name}
|
id={"multiselect-" + name}
|
||||||
onValueChange={handleOnNewValue}
|
onValueChange={handleOnNewValue}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@ interface MultiselectProps<T>
|
||||||
asChild?: boolean;
|
asChild?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
editNode?: boolean;
|
editNode?: boolean;
|
||||||
value?: T[];
|
values?: T[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Multiselect = forwardRef<
|
export const Multiselect = forwardRef<
|
||||||
|
|
@ -125,18 +125,23 @@ export const Multiselect = forwardRef<
|
||||||
asChild = false,
|
asChild = false,
|
||||||
className,
|
className,
|
||||||
editNode = false,
|
editNode = false,
|
||||||
value,
|
values,
|
||||||
...props
|
...props
|
||||||
},
|
},
|
||||||
ref,
|
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[]>(
|
const [selectedValues, setSelectedValues] = useState<MultiselectValue[]>(
|
||||||
value || [],
|
value || [],
|
||||||
);
|
);
|
||||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||||
|
|
||||||
const combinedRef = useMergeRefs<HTMLButtonElement>(ref);
|
const combinedRef = useMergeRefs<HTMLButtonElement>(ref);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!!value && value?.length > 0 && !isEqual(selectedValues, value)) {
|
if (!!value && value?.length > 0 && !isEqual(selectedValues, value)) {
|
||||||
setSelectedValues(value);
|
setSelectedValues(value);
|
||||||
|
|
@ -264,7 +269,7 @@ export const Multiselect = forwardRef<
|
||||||
<CommandList>
|
<CommandList>
|
||||||
<CommandEmpty>No results found.</CommandEmpty>
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
<CommandGroup>
|
<CommandGroup>
|
||||||
{options?.map((option) => {
|
{value?.map((option) => {
|
||||||
const isSelected = !!selectedValues.find(
|
const isSelected = !!selectedValues.find(
|
||||||
(sv) => sv.value === option.value,
|
(sv) => sv.value === option.value,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue