Add multi select with custom values to form (#41)

* Add multi select with custom values to form * Prepare components release 2.1.0 * Extend select options to support all possible component options * Prepare components release 2.1.1 * Make settings object is optional * Prepare components release 2.1.2
VolkovLabs · May 17, 2024 · 040b582 · 040b582
1 parent 4039d82
commit 040b582
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.1.2 (2024-05-17)
+
+### Features
+
+- Add multi select with custom values to form (#41)
+
 ## 2.0.1 (2024-05-15)
 
 ### Features

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -86,5 +86,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "2.0.1"
+  "version": "2.1.2"
 }
diff --git a/packages/components/src/components/Form/Form.story.tsx b/packages/components/src/components/Form/Form.story.tsx
@@ -36,6 +36,7 @@ const meta = {
         groupField1: string;
         groupField2: string;
         datetime: string;
+        multiSelect: string[];
       }>((builder) =>
         builder
           .addSlider({
@@ -162,6 +163,17 @@ const meta = {
             min: new Date().toISOString(),
             showSeconds: false,
           })
+          .addSelect({
+            path: 'multiSelect',
+            label: 'Multi Select',
+            description: 'Multi and allow custom value',
+            defaultValue: [],
+            options: [],
+            settings: {
+              isMulti: true,
+              allowCustomValue: true,
+            },
+          })
       );
 
       return <Form {...args} fields={form.fields} value={form.value} />;

diff --git a/packages/components/src/components/Form/Form.tsx b/packages/components/src/components/Form/Form.tsx
@@ -186,8 +186,13 @@ export const Form = <TValue extends object>({
             value={field.value}
             options={field.options}
             onChange={(event) => {
-              field.onChange(event.value ?? field.value);
+              if (field.settings?.isMulti) {
+                field.onChange((Array.isArray(event) ? event.map((s) => s.value) : [event.value ?? '']) as never);
+              } else {
+                field.onChange(event.value ?? field.value);
+              }
             }}
+            {...field.settings}
             aria-label={TEST_IDS.form.fieldSelect(field.fullPath)}
           />
         </FieldComponent>

diff --git a/packages/components/src/types/form-builder.ts b/packages/components/src/types/form-builder.ts
@@ -1,4 +1,5 @@
 import { SelectableValue } from '@grafana/data';
+import { SelectCommonProps } from '@grafana/ui';
 
 import { FormBuilder } from '../utils';
 
@@ -111,6 +112,25 @@ export interface SelectOptions<TObject extends object, TValue> extends BaseOptio
    * Disable Options
    */
   disableOptions?: (config: TObject) => TValue[];
+
+  /**
+   * Settings
+   */
+  settings?: Omit<
+    SelectCommonProps<TValue>,
+    | 'aria-label'
+    | 'data-testid'
+    | 'onBlur'
+    | 'onChange'
+    | 'onCloseMenu'
+    | 'onInputChange'
+    | 'onKeyDown'
+    | 'onMenuScrollToBottom'
+    | 'onMenuScrollToTop'
+    | 'onOpenMenu'
+    | 'onFocus'
+    | 'options'
+  >;
 }
 
 export interface RadioOptions<TObject extends object, TValue> extends BaseOptions<TObject, TValue> {