diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
index f8fa91e7479..4e9e010a3d6 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SelectableValue, deprecationWarning } from '@grafana/data';
 // @ts-ignore
 import { default as ReactSelect } from '@torkelo/react-select';
@@ -178,6 +178,15 @@ export function SelectBase<T>({
 }: SelectBaseProps<T>) {
   const theme = useTheme();
   const styles = getSelectStyles(theme);
+  const onChangeWithEmpty = useCallback(
+    (value: SelectValue<T>) => {
+      if (isMulti && (value === undefined || value === null)) {
+        return onChange([]);
+      }
+      onChange(value);
+    },
+    [isMulti]
+  );
   let ReactSelectComponent: ReactSelect | Creatable = ReactSelect;
   const creatableProps: any = {};
   let asyncSelectProps: any = {};
@@ -229,7 +238,7 @@ export function SelectBase<T>({
     onMenuClose: onCloseMenu,
     tabSelectsValue,
     options,
-    onChange,
+    onChange: onChangeWithEmpty,
     onBlur,
     onKeyDown,
     menuShouldScrollIntoView: false,