From 45784f58f5535e2505e8818b3a8c5115369979cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 17 Mar 2020 08:29:10 +0100
Subject: [PATCH] Variables: fixes so single value picker closes dropdown on
 select (#22823)

---
 .../pickers/OptionsPicker/OptionsPicker.tsx      | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx b/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
index f44b9fdc26d..2242a9bc25c 100644
--- a/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
+++ b/public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx
@@ -39,11 +39,17 @@ export class OptionsPickerUnconnected extends PureComponent<Props> {
   onHideOptions = () => this.props.commitChangesToVariable();
 
   onToggleOption = (option: VariableOption, clearOthers: boolean) => {
-    this.props.toggleOption({
-      option,
-      clearOthers,
-      forceSelect: false,
-    });
+    const toggleFunc = this.props.variable.multi ? this.onToggleMultiValueVariable : this.onToggleSingleValueVariable;
+    toggleFunc(option, clearOthers);
+  };
+
+  onToggleSingleValueVariable = (option: VariableOption, clearOthers: boolean) => {
+    this.props.toggleOption({ option, clearOthers, forceSelect: false });
+    this.onHideOptions();
+  };
+
+  onToggleMultiValueVariable = (option: VariableOption, clearOthers: boolean) => {
+    this.props.toggleOption({ option, clearOthers, forceSelect: false });
   };
 
   render() {