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 = ({ ...props }) => { onChange?.([...(value ?? []), query]); return query; }} + buildOption={(value) => value} > ); }; 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 = Override< options: readonly SelectorOption[]; onChange?: (value: T[]) => void; getkey?: (value: T) => string; + buildOption?: (value: string) => T; }, Omit >; @@ -119,11 +120,15 @@ export function MultiSelector({ options, onChange, getkey = DefaultKeyBuilder, + buildOption, ...select }: MultiSelectorProps) { const labelRef = useRef(getkey); labelRef.current = getkey; + const buildRef = useRef(buildOption); + buildRef.current = buildOption; + const data = useMemo( () => options.map>(({ value, ...option }) => ({ @@ -150,6 +155,8 @@ export function MultiSelector({ 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({ return ( );