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({ }: SelectBaseProps) { const theme = useTheme(); const styles = getSelectStyles(theme); + const onChangeWithEmpty = useCallback( + (value: SelectValue) => { + 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({ onMenuClose: onCloseMenu, tabSelectsValue, options, - onChange, + onChange: onChangeWithEmpty, onBlur, onKeyDown, menuShouldScrollIntoView: false,