chore: use CompatibleCombobox

Author: github-vincent-miszczak

src/components/CompatibleCombobox.tsx

@@ -27,6 +27,13 @@ export const CompatibleCombobox: typeof Combobox = (props) => {
     });
   };
 
+  const handleCreateOption = (customValue: string) => {
+    props.onChange({
+      value: customValue as any,
+      label: customValue,
+    });
+  };
+
   const asyncOption = useCallback((value: SelectValue<any>) => {
     if (typeof props.options === 'function') {
       return props.options(value);
@@ -61,6 +68,7 @@ export const CompatibleCombobox: typeof Combobox = (props) => {
         loadOptions={selectOptions}
         defaultOptions
         allowCustomValue={props.createCustomValue}
+        onCreateOption={props.createCustomValue ? handleCreateOption : undefined}
         onChange={handleSelectChange}
         isClearable={props.isClearable}
         isLoading={props.loading}
@@ -76,6 +84,7 @@ export const CompatibleCombobox: typeof Combobox = (props) => {
       value={normalizedValue}
       options={selectOptions}
       allowCustomValue={props.createCustomValue}
+      onCreateOption={props.createCustomValue ? handleCreateOption : undefined}
       onChange={handleSelectChange}
       isClearable={props.isClearable}
       isLoading={props.loading}

src/components/VariableQueryEditor/VariableQueryEditor.tsx

@@ -2,7 +2,9 @@ import { debounce } from 'lodash';
 import React, { FormEvent, useEffect, useState } from 'react';
 
 import { DEFAULT_FIELD_DISPLAY_VALUES_LIMIT, QueryEditorProps, SelectableValue } from '@grafana/data';
-import { Combobox, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+
+import { CompatibleCombobox } from '../CompatibleCombobox';
 
 import { VictoriaLogsDatasource } from '../../datasource';
 import { FilterFieldType, Options, Query, VariableQuery } from '../../types';
@@ -21,7 +23,7 @@ export const VariableQueryEditor = ({ onChange, query, datasource, range }: Prop
   const [queryFilter, setQueryFilter] = useState<string>('');
   const [field, setField] = useState<string>('');
   const [limit, setLimit] = useState<number>(DEFAULT_FIELD_DISPLAY_VALUES_LIMIT);
-  const [fieldNames, setFieldNames] = useState<SelectableValue<string>[]>([]);
+  const [fieldNames, setFieldNames] = useState<Array<{ value: string; label: string; description?: string }>>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
 
@@ -33,6 +35,12 @@ export const VariableQueryEditor = ({ onChange, query, datasource, range }: Prop
     onChange({ refId, type: newType.value, field, query: queryFilter });
   };
 
+  const handleFieldChange = (option: { value: string }) => {
+    const newField = String(option.value);
+    setField(newField);
+    onChange({ refId, type: type!, field: newField, query: queryFilter, limit });
+  };
+
   const handleBlur = () => {
     if (!type) {
       return;
@@ -127,13 +135,9 @@ export const VariableQueryEditor = ({ onChange, query, datasource, range }: Prop
             error={error}
             invalid={!!error}
           >
-            <Combobox
+            <CompatibleCombobox
               placeholder='Select field'
-              onChange={(option) => {
-                const newField = String(option.value);
-                setField(newField);
-                onChange({ refId, type: type!, field: newField, query: queryFilter, limit });
-              }}
+              onChange={handleFieldChange}
               value={field || null}
               options={fieldNames}
               width={20}