[7.x] [Lens] Make the dimension flyout panel stay close on outside cl…

…ick (#83059) (#83669) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 19, 2020 · 516392d · 516392d
1 parent 722a2af
commit 516392d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/...ins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/...ins/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,14 @@ export const FilterPopover = ({
       panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
       isOpen={isOpenByCreation || isPopoverOpen}
       ownFocus
-      closePopover={() => {
-        setPopoverOpen(false);
-      }}
+      closePopover={() => closePopover()}
       button={
         <Button
           onClick={() => {
+            if (isOpenByCreation) {
+              setIsOpenByCreation(false);
+            }
             setIsPopoverOpen((open) => !open);
-            setIsOpenByCreation(false);
           }}
         />
       }
@@ -84,7 +88,7 @@ export const FilterPopover = ({
         onChange={setFilterLabel}
         placeholder={getPlaceholder(filter.input.query)}
         inputRef={inputRef}
-        onSubmit={() => setPopoverOpen(false)}
+        onSubmit={() => closePopover()}
         dataTestSubj="indexPattern-filters-label"
       />
     </EuiPopover>

diff --git a/...ins/lens/public/indexpattern_datasource/operations/definitions/ranges/advanced_editor.tsx b/...ins/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);
           }}
         />
       }
@@ -208,7 +213,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
+  // Update locally all the time, but bounce the parents prop function to avoid too many requests
   // Avoid to trigger on first render
   useDebounceWithOptions(
     () => {
@@ -250,7 +255,11 @@ export const AdvancedRangeEditor = ({
       <>
         <DragDropBuckets
           onDragEnd={setLocalRanges}
-          onDragStart={() => setIsOpenByCreation(false)}
+          onDragStart={() => {
+            if (isOpenByCreation) {
+              setIsOpenByCreation(false);
+            }
+          }}
           droppableId="RANGES_DROPPABLE_AREA"
           items={localRanges}
         >