fix(power-bi): 🐛 Quick filter dropdowns now close when clicking outsi…

…de the popover (#605)
equinor · Apr 24, 2024 · 9ae76f9 · 9ae76f9
1 parent 6929299
commit 9ae76f9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/packages/power-bi/package.json b/packages/power-bi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-powerbi",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx b/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx
@@ -1,6 +1,7 @@
 import { Icon } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
 import { ActiveFilter, PowerBiFilter, PowerBiFilterItem } from '../../types';
 import { getFilterHeaderText } from '../../utils/getFilterHeader';
 import { FilterController } from '../Filter/Filter';
@@ -27,6 +28,7 @@ export const PowerBiFilterGroup = ({
 
   return (
     <>
+      {isOpen && <StyledOverlay onClick={() => setIsOpen(false)} />}
       <StyledFilterGroupWrapper onClick={() => setIsOpen((s) => !s)} ref={anchorEl}>
         <StyledFilterGroupContent>
           <div>
@@ -54,3 +56,13 @@ export const PowerBiFilterGroup = ({
     </>
   );
 };
+
+// Overlay to close the popover when clicking outside it
+const StyledOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+`;
diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",