Fix chip input issuev1.1.2-beta.21

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