summaryrefslogtreecommitdiffhomepage
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/inputs/ChipInput.tsx1
-rw-r--r--frontend/src/components/inputs/Selector.tsx9
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>
);