Grafana UI: Fix Forms.Select onChangeWithEmpty (#22647)

* Sort props

* Add missing deps to useCallback

packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx

@@ -65,44 +65,44 @@ const CustomControl = (props: any) => {
 };
 
 export function SelectBase<T>({
-  value,
+  allowCustomValue = false,
+  autoFocus = false,
+  backspaceRemovesValue = true,
+  components,
+  defaultOptions,
   defaultValue,
-  inputValue,
-  onInputChange,
-  onCreateOption,
-  options = [],
-  onChange,
-  onBlur,
-  onKeyDown,
-  onCloseMenu,
-  onOpenMenu,
-  placeholder = 'Choose',
-  getOptionValue,
-  getOptionLabel,
-  isSearchable = true,
   disabled = false,
+  formatCreateLabel,
+  getOptionLabel,
+  getOptionValue,
+  inputValue,
+  invalid,
   isClearable = false,
-  isMulti = false,
   isLoading = false,
+  isMulti = false,
   isOpen,
-  autoFocus = false,
-  openMenuOnFocus = false,
+  isSearchable = true,
+  loadOptions,
+  loadingMessage = 'Loading options...',
   maxMenuHeight = 300,
+  menuPosition,
   noOptionsMessage = 'No options found',
-  tabSelectsValue = true,
-  backspaceRemovesValue = true,
-  allowCustomValue = false,
-  size = 'auto',
+  onBlur,
+  onChange,
+  onCloseMenu,
+  onCreateOption,
+  onInputChange,
+  onKeyDown,
+  onOpenMenu,
+  openMenuOnFocus = false,
+  options = [],
+  placeholder = 'Choose',
   prefix,
-  formatCreateLabel,
-  loadOptions,
-  loadingMessage = 'Loading options...',
-  defaultOptions,
   renderControl,
+  size = 'auto',
+  tabSelectsValue = true,
+  value,
   width,
-  invalid,
-  components,
-  menuPosition,
 }: SelectBaseProps<T>) {
   const theme = useTheme();
   const styles = getSelectStyles(theme);
@@ -113,7 +113,7 @@ export function SelectBase<T>({
       }
       onChange(value);
     },
-    [isMulti]
+    [isMulti, value, onChange]
   );
   let ReactSelectComponent: ReactSelect | Creatable = ReactSelect;
   const creatableProps: any = {};
@@ -141,39 +141,39 @@ export function SelectBase<T>({
 
   const commonSelectProps = {
     autoFocus,
-    placeholder,
-    isSearchable,
-    // Passing isDisabled as react-select accepts this prop
-    isDisabled: disabled,
+    backspaceRemovesValue,
+    captureMenuScroll: false,
+    defaultValue,
     // Also passing disabled, as this is the new Select API, and I want to use this prop instead of react-select's one
     disabled,
+    getOptionLabel,
+    getOptionValue,
+    inputValue,
     invalid,
-    prefix,
     isClearable,
+    // Passing isDisabled as react-select accepts this prop
+    isDisabled: disabled,
     isLoading,
+    isMulti,
+    isSearchable,
+    maxMenuHeight,
     menuIsOpen: isOpen,
-    defaultValue,
-    inputValue,
+    menuPlacement: 'auto',
+    menuPosition,
+    menuShouldScrollIntoView: false,
+    onBlur,
+    onChange: onChangeWithEmpty,
     onInputChange,
-    value: isMulti ? selectedValue : selectedValue[0],
-    getOptionLabel,
-    getOptionValue,
-    openMenuOnFocus,
-    maxMenuHeight,
-    isMulti,
-    backspaceRemovesValue,
-    onMenuOpen: onOpenMenu,
+    onKeyDown,
     onMenuClose: onCloseMenu,
-    tabSelectsValue,
+    onMenuOpen: onOpenMenu,
+    openMenuOnFocus,
     options,
-    onChange: onChangeWithEmpty,
-    onBlur,
-    onKeyDown,
-    menuShouldScrollIntoView: false,
+    placeholder,
+    prefix,
     renderControl,
-    captureMenuScroll: false,
-    menuPlacement: 'auto',
-    menuPosition,
+    tabSelectsValue,
+    value: isMulti ? selectedValue : selectedValue[0],
   };
 
   // width property is deprecated in favor of size or className