From 90d9334256b5315ca455a12e4521fe89a45e702c Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Thu, 1 Oct 2020 14:40:31 +0200
Subject: [PATCH] fix: add EuiOutsideClickDetector (#78733) (#79095)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../config_panel/dimension_container.tsx      | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 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 d6b395ac74cce..a415eb44cf196 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
@@ -13,6 +13,7 @@ import {
   EuiButtonEmpty,
   EuiFlexItem,
   EuiFocusTrap,
+  EuiOutsideClickDetector,
 } from '@elastic/eui';
 
 import classNames from 'classnames';
@@ -91,37 +92,39 @@ export function DimensionContainer({
 
   const flyout = flyoutIsVisible && (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
-      <div
-        role="dialog"
-        aria-labelledby="lnsDimensionContainerTitle"
-        className={classNames('lnsDimensionContainer', {
-          'lnsDimensionContainer--noAnimation': openByCreation,
-        })}
-      >
-        <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
-          <EuiTitle size="xs">
-            <EuiButtonEmpty
-              onClick={closeFlyout}
-              data-test-subj="lns-indexPattern-dimensionContainerTitle"
-              id="lnsDimensionContainerTitle"
-              iconType="sortLeft"
-              flush="left"
-            >
-              <strong>{panelTitle}</strong>
+      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!flyoutIsVisible}>
+        <div
+          role="dialog"
+          aria-labelledby="lnsDimensionContainerTitle"
+          className={classNames('lnsDimensionContainer', {
+            'lnsDimensionContainer--noAnimation': openByCreation,
+          })}
+        >
+          <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
+            <EuiTitle size="xs">
+              <EuiButtonEmpty
+                onClick={closeFlyout}
+                data-test-subj="lns-indexPattern-dimensionContainerTitle"
+                id="lnsDimensionContainerTitle"
+                iconType="sortLeft"
+                flush="left"
+              >
+                <strong>{panelTitle}</strong>
+              </EuiButtonEmpty>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlexItem className="eui-yScrollWithShadows" grow={1}>
+            {panel}
+          </EuiFlexItem>
+          <EuiFlyoutFooter className="lnsDimensionContainer__footer">
+            <EuiButtonEmpty flush="left" size="s" iconType="cross" onClick={closeFlyout}>
+              {i18n.translate('xpack.lens.dimensionContainer.close', {
+                defaultMessage: 'Close',
+              })}
             </EuiButtonEmpty>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlexItem className="eui-yScrollWithShadows" grow={1}>
-          {panel}
-        </EuiFlexItem>
-        <EuiFlyoutFooter className="lnsDimensionContainer__footer">
-          <EuiButtonEmpty flush="left" size="s" iconType="cross" onClick={closeFlyout}>
-            {i18n.translate('xpack.lens.dimensionContainer.close', {
-              defaultMessage: 'Close',
-            })}
-          </EuiButtonEmpty>
-        </EuiFlyoutFooter>
-      </div>
+          </EuiFlyoutFooter>
+        </div>
+      </EuiOutsideClickDetector>
     </EuiFocusTrap>
   );