From bf5ac0fe651a7b8e0f8cd0b65886330d762c1ace Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 10 Nov 2020 15:29:56 +0100
Subject: [PATCH 1/5] :bug: Update the active dimension on close with last
 value in the state

---
 .../editor_frame/config_panel/layer_panel.tsx             | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 0332f11aa78b3..6128b28f21deb 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -463,10 +463,12 @@ export function LayerPanel(
                           prevState: props.visualizationState,
                         })
                       );
-                      setActiveDimension({
-                        ...activeDimension,
+                      // Many setActiveDimension calls may happen at once
+                      // so pick the last update value and update it
+                      setActiveDimension((prevActiveDimension) => ({
+                        ...prevActiveDimension,
                         isNew: false,
-                      });
+                      }));
                     },
                   }}
                 />

From 59ecc9c135b6da00b0caeeffa0e5056d42d5231a Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Wed, 11 Nov 2020 18:21:35 +0100
Subject: [PATCH 2/5] :bug: Rework the fix at the operation level

---
 .../editor_frame/config_panel/layer_panel.tsx |  8 +++----
 .../definitions/filters/filter_popover.tsx    | 18 +++++++++++++---
 .../definitions/ranges/advanced_editor.tsx    | 21 +++++++++++++------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 6128b28f21deb..0332f11aa78b3 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -463,12 +463,10 @@ export function LayerPanel(
                           prevState: props.visualizationState,
                         })
                       );
-                      // Many setActiveDimension calls may happen at once
-                      // so pick the last update value and update it
-                      setActiveDimension((prevActiveDimension) => ({
-                        ...prevActiveDimension,
+                      setActiveDimension({
+                        ...activeDimension,
                         isNew: false,
-                      }));
+                      });
                     },
                   }}
                 />
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index 077e07a89f788..85e041ac7a4b3 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -58,13 +58,20 @@ export const FilterPopover = ({
       isOpen={isOpenByCreation || isPopoverOpen}
       ownFocus
       closePopover={() => {
-        setPopoverOpen(false);
+        if (isOpenByCreation) {
+          setIsOpenByCreation(false);
+        }
+        if (isPopoverOpen) {
+          setIsPopoverOpen(false);
+        }
       }}
       button={
         <Button
           onClick={() => {
+            if (isOpenByCreation) {
+              setIsOpenByCreation(false);
+            }
             setIsPopoverOpen((open) => !open);
-            setIsOpenByCreation(false);
           }}
         />
       }
@@ -84,7 +91,12 @@ export const FilterPopover = ({
         onChange={setFilterLabel}
         placeholder={getPlaceholder(filter.input.query)}
         inputRef={inputRef}
-        onSubmit={() => setPopoverOpen(false)}
+        onSubmit={() => {
+          if (isOpenByCreation) {
+            setIsOpenByCreation(false);
+          }
+          setIsPopoverOpen(false);
+        }}
         dataTestSubj="indexPattern-filters-label"
       />
     </EuiPopover>
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
index c6773e806aef8..286dd74c0fb73 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx
@@ -86,9 +86,12 @@ export const RangePopover = ({
   });
 
   const onSubmit = () => {
-    setIsPopoverOpen(false);
-    setIsOpenByCreation(false);
-    saveRangeAndReset(tempRange, true);
+    if (isOpenByCreation) {
+      setIsOpenByCreation(false);
+    }
+    if (isPopoverOpen) {
+      setIsPopoverOpen(false);
+    }
   };
 
   return (
@@ -100,8 +103,10 @@ export const RangePopover = ({
       button={
         <Button
           onClick={() => {
+            if (isOpenByCreation) {
+              setIsOpenByCreation(false);
+            }
             setIsPopoverOpen((isOpen) => !isOpen);
-            setIsOpenByCreation(false);
           }}
         />
       }
@@ -209,7 +214,7 @@ export const AdvancedRangeEditor = ({
   const lastIndex = localRanges.length - 1;
 
   // Update locally all the time, but bounce the parents prop function
-  // to aviod too many requests
+  // to avoid too many requests
   useDebounce(
     () => {
       setRanges(localRanges.map(({ id, ...rest }) => ({ ...rest })));
@@ -249,7 +254,11 @@ export const AdvancedRangeEditor = ({
       <>
         <DragDropBuckets
           onDragEnd={setLocalRanges}
-          onDragStart={() => setIsOpenByCreation(false)}
+          onDragStart={() => {
+            if (isOpenByCreation) {
+              setIsOpenByCreation(false);
+            }
+          }}
           droppableId="RANGES_DROPPABLE_AREA"
           items={localRanges}
         >

From 2dae5e85a41ebcdc9e34561d65e7d42fc5ea30ac Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Wed, 11 Nov 2020 18:36:04 +0100
Subject: [PATCH 3/5] :bug: Fixed the dnd warning issue

---
 .../editor_frame/config_panel/dimension_container.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index 8f1b441d1d285..af69bdd34bb4e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -32,8 +32,11 @@ export function DimensionContainer({
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
 
   const closeFlyout = () => {
-    handleClose();
-    setFocusTrapIsEnabled(false);
+    // some internal popovers are pretty slow to unmount, so give it some time
+    setTimeout(() => {
+      handleClose();
+      setFocusTrapIsEnabled(false);
+    }, 150); // <= 150 has been chosen from empirical testing
   };
 
   useEffect(() => {

From c4cc2bfa88fa80f9fe28459d275a69581bed8a63 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Thu, 12 Nov 2020 10:01:37 +0100
Subject: [PATCH 4/5] :recycle: Refactor to reuse shared function

---
 .../definitions/filters/filter_popover.tsx    | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index 85e041ac7a4b3..18fdf2be000c7 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -32,9 +32,13 @@ export const FilterPopover = ({
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const inputRef = React.useRef<HTMLInputElement>();
 
-  const setPopoverOpen = (isOpen: boolean) => {
-    setIsPopoverOpen(isOpen);
-    setIsOpenByCreation(isOpen);
+  const closePopover = () => {
+    if (isOpenByCreation) {
+      setIsOpenByCreation(false);
+    }
+    if (isPopoverOpen) {
+      setIsPopoverOpen(false);
+    }
   };
 
   const setFilterLabel = (label: string) => setFilter({ ...filter, label });
@@ -57,14 +61,7 @@ export const FilterPopover = ({
       panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
       isOpen={isOpenByCreation || isPopoverOpen}
       ownFocus
-      closePopover={() => {
-        if (isOpenByCreation) {
-          setIsOpenByCreation(false);
-        }
-        if (isPopoverOpen) {
-          setIsPopoverOpen(false);
-        }
-      }}
+      closePopover={() => closePopover()}
       button={
         <Button
           onClick={() => {
@@ -91,12 +88,7 @@ export const FilterPopover = ({
         onChange={setFilterLabel}
         placeholder={getPlaceholder(filter.input.query)}
         inputRef={inputRef}
-        onSubmit={() => {
-          if (isOpenByCreation) {
-            setIsOpenByCreation(false);
-          }
-          setIsPopoverOpen(false);
-        }}
+        onSubmit={() => closePopover()}
         dataTestSubj="indexPattern-filters-label"
       />
     </EuiPopover>

From 33e776a0b0e53cddf9784b0fe9318b548d1e8853 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Mon, 16 Nov 2020 11:22:49 +0100
Subject: [PATCH 5/5] :recycle: Revert flyout cose logic

---
 .../editor_frame/config_panel/dimension_container.tsx      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index af69bdd34bb4e..8f1b441d1d285 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -32,11 +32,8 @@ export function DimensionContainer({
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
 
   const closeFlyout = () => {
-    // some internal popovers are pretty slow to unmount, so give it some time
-    setTimeout(() => {
-      handleClose();
-      setFocusTrapIsEnabled(false);
-    }, 150); // <= 150 has been chosen from empirical testing
+    handleClose();
+    setFocusTrapIsEnabled(false);
   };
 
   useEffect(() => {