From c24d5078003eb9ef840ae03437c562b162fd18ed Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 31 May 2021 04:35:47 -0400
Subject: [PATCH] InfluxDB: InfluxQL: apply on enter not on blur (#34963)
 (#34969)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 618dc6a2f62f500e415230764aec8c0dcc33f844)

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
---
 .../components/VisualInfluxQLEditor/Seg.tsx    | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
index b77285e9ac2..b7d125eca77 100644
--- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
+++ b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
@@ -137,22 +137,23 @@ const Sel = ({ loadOptions, filterByLoadOptions, allowCustomValue, onChange, onC
 type InpProps = {
   initialValue: string;
   onChange: (newVal: string) => void;
+  onClose: () => void;
 };
 
-const Inp = ({ initialValue, onChange }: InpProps): JSX.Element => {
+const Inp = ({ initialValue, onChange, onClose }: InpProps): JSX.Element => {
   const [currentValue, setCurrentValue] = useShadowedState(initialValue);
 
-  const onBlur = () => {
-    // we send empty-string as undefined
-    onChange(currentValue);
-  };
-
   return (
     <Input
       autoFocus
       type="text"
       spellCheck={false}
-      onBlur={onBlur}
+      onBlur={onClose}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          onChange(currentValue);
+        }
+      }}
       onChange={(e) => {
         setCurrentValue(e.currentTarget.value);
       }}
@@ -208,6 +209,9 @@ export const Seg = ({
       return (
         <Inp
           initialValue={value}
+          onClose={() => {
+            setOpen(false);
+          }}
           onChange={(v) => {
             setOpen(false);
             onChange({ value: v, label: v });