From 6324490dd3359f4b2aa2acd88b9b834444f42203 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Wed, 23 Jun 2021 10:14:41 +0200
Subject: [PATCH] fix(dashboard): Close FiltersBadge popover on window resize
 (#15305)

---
 .../components/FiltersBadge/DetailsPanel/index.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
index af91ad8ade..7140817a34 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Global, css } from '@emotion/react';
 import { t, useTheme } from '@superset-ui/core';
 import {
@@ -53,8 +53,18 @@ const DetailsPanelPopover = ({
   onHighlightFilterSource,
   children,
 }: DetailsPanelProps) => {
+  const [visible, setVisible] = useState(false);
   const theme = useTheme();
 
+  // we don't need to clean up useEffect, setting { once: true } removes the event listener after handle function is called
+  useEffect(() => {
+    if (visible) {
+      window.addEventListener('resize', () => setVisible(false), {
+        once: true,
+      });
+    }
+  }, [visible]);
+
   const getDefaultActivePanel = () => {
     const result = [];
     if (appliedCrossFilterIndicators.length) {
@@ -77,6 +87,7 @@ const DetailsPanelPopover = ({
   ]);
 
   function handlePopoverStatus(isOpen: boolean) {
+    setVisible(isOpen);
     // every time the popover opens, make sure the most relevant panel is active
     if (isOpen) {
       setActivePanels(getDefaultActivePanel());
@@ -256,6 +267,7 @@ const DetailsPanelPopover = ({
     <Popover
       overlayClassName="filterStatusPopover"
       content={content}
+      visible={visible}
       onVisibleChange={handlePopoverStatus}
       placement="bottom"
       trigger="click"