Fix multi select

Author: jackcloudquery

etc/plugin-config-ui-lib.api.md

@@ -157,10 +157,12 @@ export interface ControlExclusiveToggleFieldProps {
 export { Controller }
 
 // @public
-export function ControlMultiSelectField({ name, helperText, label, }: ControlMultiSelectFieldProps): JSX_2.Element;
+export function ControlMultiSelectField({ name, helperText, label, codeSeparators, }: ControlMultiSelectFieldProps): JSX_2.Element;
 
 // @public (undocumented)
 export interface ControlMultiSelectFieldProps {
+    // (undocumented)
+    codeSeparators?: string[];
     // (undocumented)
     helperText?: ReactNode;
     // (undocumented)
@@ -588,7 +590,7 @@ export const MultiAutocomplete: React_2.ForwardRefExoticComponent<MultiAutocompl
 // @public (undocumented)
 export interface MultiAutocompleteProps {
     // (undocumented)
-    codeSeparator?: string;
+    codeSeparators?: string[];
     // (undocumented)
     disabled?: boolean | undefined;
     // (undocumented)

src/components/form/controls/controlMultiSelectField.tsx

@@ -12,6 +12,7 @@ export interface ControlMultiSelectFieldProps {
   name: string;
   label: string;
   helperText?: ReactNode;
+  codeSeparators?: string[];
 }
 
 /**
@@ -23,6 +24,7 @@ export function ControlMultiSelectField({
   name,
   helperText = '',
   label,
+  codeSeparators,
 }: ControlMultiSelectFieldProps) {
   const { trigger, formState } = useFormContext();
 
@@ -57,6 +59,7 @@ export function ControlMultiSelectField({
             error={!!errors}
             helperText={getFieldHelperText(errors as string, helperText)}
             label={label}
+            codeSeparators={codeSeparators}
           />
         );
       }}

src/components/inputs/multiAutocomplete.tsx

@@ -17,7 +17,7 @@ export interface MultiAutocompleteProps {
   error?: boolean;
   helperText?: ReturnType<typeof getFieldHelperText>;
   label: string;
-  codeSeparator?: string;
+  codeSeparators?: string[];
 }
 
 /**
@@ -27,7 +27,17 @@ export interface MultiAutocompleteProps {
  */
 export const MultiAutocomplete = React.forwardRef<HTMLDivElement, MultiAutocompleteProps>(
   (
-    { label, disabled, value, onChange, onBlur, name, helperText, error, codeSeparator = 'Space' },
+    {
+      label,
+      disabled,
+      value,
+      onChange,
+      onBlur,
+      name,
+      helperText,
+      error,
+      codeSeparators = ['Space'],
+    },
     ref,
   ) => {
     const fieldProps = { onBlur, name, ref, disabled };
@@ -48,7 +58,8 @@ export const MultiAutocomplete = React.forwardRef<HTMLDivElement, MultiAutocompl
         }}
         onKeyDown={(event) => {
           const target = event.target as HTMLInputElement;
-          const shouldSubmit = event.code === codeSeparator && target?.value?.trim().length > 0;
+          const shouldSubmit =
+            codeSeparators.includes(event.code) && target?.value?.trim().length > 0;
 
           if (shouldSubmit) {
             event.preventDefault();