1 files changed, 17 insertions, 9 deletions
diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx
index 95134db92..43b559736 100644
--- a/frontend/src/pages/Settings/components/forms.tsx
+++ b/frontend/src/pages/Settings/components/forms.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode, ReactText } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import {
   Input,
   NumberInput,
@@ -49,7 +49,7 @@ export const Number: FunctionComponent<NumberProps> = (props) => {
   );
 };
 
-export type TextProps = BaseInput<ReactText> & TextInputProps;
+export type TextProps = BaseInput<string | number> & TextInputProps;
 
 export const Text: FunctionComponent<TextProps> = (props) => {
   const { value, update, rest } = useBaseInput(props);
@@ -86,11 +86,7 @@ export interface CheckProps extends BaseInput<boolean> {
   inline?: boolean;
 }
 
-export const Check: FunctionComponent<CheckProps> = ({
-  label,
-  inline,
-  ...props
-}) => {
+export const Check: FunctionComponent<CheckProps> = ({ label, ...props }) => {
   const { value, update, rest } = useBaseInput(props);
 
   return (
@@ -160,13 +156,25 @@ export const Slider: FunctionComponent<SliderProps> = (props) => {
 };
 
 type ChipsProp = BaseInput<string[]> &
-  Omit<ChipInputProps, "onChange" | "data">;
+  Omit<ChipInputProps, "onChange" | "data"> & {
+    sanitizeFn?: (values: string[] | null) => string[] | undefined;
+  };
 
 export const Chips: FunctionComponent<ChipsProp> = (props) => {
   const { value, update, rest } = useBaseInput(props);
 
+  const handleChange = (value: string[] | null) => {
+    const sanitizedValues = props.sanitizeFn?.(value) ?? value;
+
+    update(sanitizedValues || null);
+  };
+
   return (
-    <ChipInput {...rest} value={value ?? []} onChange={update}></ChipInput>
+    <ChipInput
+      {...rest}
+      value={value ?? []}
+      onChange={handleChange}
+    ></ChipInput>
   );
 };