fix: update Multiselect component to use 'values' prop instead of 'value' (#2640)

This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-07-11 17:21:41 -03:00 • committed by GitHub
commit 7d7502744e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 5 deletions

View file

@ -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):

View file

@ -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}
/> />

View file

@ -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,
); );