From 19a003147ac929aa049d6e807f0911168cf11acb Mon Sep 17 00:00:00 2001
From: Clarity-89 <homes89@ukr.net>
Date: Mon, 10 Feb 2025 16:37:50 +0200
Subject: [PATCH] Use multicombobox

---
 .../app/features/provisioning/ConfigForm.tsx   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/public/app/features/provisioning/ConfigForm.tsx b/public/app/features/provisioning/ConfigForm.tsx
index 7160d640c47..e361cf11e17 100644
--- a/public/app/features/provisioning/ConfigForm.tsx
+++ b/public/app/features/provisioning/ConfigForm.tsx
@@ -16,7 +16,8 @@ import {
   ControlledCollapse,
   RadioButtonGroup,
   Stack,
-  MultiSelect,
+  MultiCombobox,
+  ComboboxOption,
 } from '@grafana/ui';
 import { FormPrompt } from 'app/core/components/FormPrompt/FormPrompt';
 
@@ -31,7 +32,7 @@ const targetOptions = [
   { value: 'folder', label: 'Managed folder' },
 ];
 
-const workflowOptions: Array<{ label: string; value: WorkflowOption }> = [
+const workflowOptions: Array<ComboboxOption<WorkflowOption>> = [
   { label: 'Push', value: 'push' },
   { label: 'Branch', value: 'branch' },
 ];
@@ -186,16 +187,9 @@ export function ConfigForm({ data }: ConfigFormProps) {
               name={'workflows'}
               control={control}
               rules={{ required: 'This field is required.' }}
-              render={({ field: { ref, onChange, ...field } }) => {
-                return (
-                  <MultiSelect
-                    options={workflowOptions}
-                    onChange={(value) => onChange(value.map((v) => v.value))}
-                    placeholder={'Select workflows'}
-                    {...field}
-                  />
-                );
-              }}
+              render={({ field: { ref, ...field } }) => (
+                <MultiCombobox options={workflowOptions} placeholder={'Select workflows'} {...field} />
+              )}
             />
           </Field>
           <Field label={'Show dashboard previews'}>