diff options
Diffstat (limited to 'frontend/src/components')
-rw-r--r-- | frontend/src/components/inputs/ChipInput.tsx | 1 | ||||
-rw-r--r-- | frontend/src/components/inputs/Selector.tsx | 9 |
2 files changed, 9 insertions, 1 deletions
diff --git a/frontend/src/components/inputs/ChipInput.tsx b/frontend/src/components/inputs/ChipInput.tsx index 2b1756c89..4308f7189 100644 --- a/frontend/src/components/inputs/ChipInput.tsx +++ b/frontend/src/components/inputs/ChipInput.tsx @@ -28,6 +28,7 @@ const ChipInput: FunctionComponent<ChipInputProps> = ({ ...props }) => { onChange?.([...(value ?? []), query]); return query; }} + buildOption={(value) => value} ></MultiSelector> ); }; diff --git a/frontend/src/components/inputs/Selector.tsx b/frontend/src/components/inputs/Selector.tsx index 38b48722b..ba253ae64 100644 --- a/frontend/src/components/inputs/Selector.tsx +++ b/frontend/src/components/inputs/Selector.tsx @@ -109,6 +109,7 @@ export type MultiSelectorProps<T> = Override< options: readonly SelectorOption<T>[]; onChange?: (value: T[]) => void; getkey?: (value: T) => string; + buildOption?: (value: string) => T; }, Omit<MultiSelectProps, "data"> >; @@ -119,11 +120,15 @@ export function MultiSelector<T>({ options, onChange, getkey = DefaultKeyBuilder, + buildOption, ...select }: MultiSelectorProps<T>) { const labelRef = useRef(getkey); labelRef.current = getkey; + const buildRef = useRef(buildOption); + buildRef.current = buildOption; + const data = useMemo( () => options.map<SelectItemWithPayload<T>>(({ value, ...option }) => ({ @@ -150,6 +155,8 @@ export function MultiSelector<T>({ const payload = data.find((v) => v.value === value)?.payload; if (payload) { payloads.push(payload); + } else if (buildRef.current) { + payloads.push(buildRef.current(value)); } } onChange?.(payloads); @@ -159,10 +166,10 @@ export function MultiSelector<T>({ return ( <MultiSelect + {...select} value={wrappedValue} defaultValue={wrappedDefaultValue} onChange={wrappedOnChange} - {...select} data={data} ></MultiSelect> ); |