Fix powerbi filter item search

equinor · Nov 18, 2024 · adcafd6 · adcafd6
1 parent 04fc734
commit adcafd6
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/packages/power-bi/package.json b/packages/power-bi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-powerbi",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -55,4 +55,3 @@
   },
   "gitHead": "6407f12589214b96228ab87d32a211f7c1cd6ba4"
 }
-
diff --git a/packages/power-bi/src/lib/components/Header/Header.tsx b/packages/power-bi/src/lib/components/Header/Header.tsx
@@ -1,6 +1,7 @@
 import { Button, Icon, Search } from '@equinor/eds-core-react';
 import { useState } from 'react';
 import styled from 'styled-components';
+import useClickOutside from '../../hooks/useClickOutside';
 import { FilterClearIcon } from '../../icons';
 import { FilterController } from '../Filter/Filter';
 import { Case, Switch } from '../switch/Switch';
@@ -20,6 +21,7 @@ type HeaderProps = {
   deselectAllValues: () => Promise<void>;
   hasActiveFilters: boolean;
   searchValue: string | undefined;
+  container: React.RefObject<HTMLDivElement>;
 };
 
 export const Header = ({
@@ -30,8 +32,19 @@ export const Header = ({
   searchValue,
   hasActiveFilters,
   deselectAllValues,
+  container,
 }: HeaderProps): JSX.Element => {
   const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+
+  useClickOutside(
+    container,
+    () => {
+      setIsSearchActive(false);
+      onSearch(undefined);
+    },
+    isSearchActive
+  );
+
   return (
     <StyledContainer>
       <Switch>
@@ -44,10 +57,6 @@ export const Header = ({
             aria-label="filter group"
             onKeyPress={(e) => e.key === 'Enter' && handleEnterPress()}
             onChange={(e) => onSearch(e.target.value)}
-            onBlur={() => {
-              setIsSearchActive(false);
-              onSearch(undefined);
-            }}
           />
         </Case>
         <Case when={true}>

diff --git a/packages/power-bi/src/lib/components/filterItems/FilterItems.tsx b/packages/power-bi/src/lib/components/filterItems/FilterItems.tsx
@@ -31,6 +31,7 @@ export const FilterItems = ({
   const handleOnSearchChange = (value: string | undefined) => {
     setSearchValue(value);
   };
+  const ref = useRef<HTMLDivElement>(null);
 
   const filterValues = Object.values(group?.value ?? '(Blank)');
   const searchedFilterItems = useMemo(() => searchFilterItems(filterValues, searchValue), [filterValues, searchValue]);
@@ -51,7 +52,7 @@ export const FilterItems = ({
   });
 
   return (
-    <StyledFilterGroupContainer>
+    <StyledFilterGroupContainer ref={ref}>
       <Header
         searchValue={searchValue}
         handleEnterPress={handleEnterPress}
@@ -61,6 +62,7 @@ export const FilterItems = ({
         deselectAllValues={() => controller.deselectAllValues(group, filterValues[0])}
         onSearch={handleOnSearchChange}
         searchEnabled={group.filterVals.length > 7}
+        container={ref}
       />
       <StyledCheckboxWrap ref={parentRef}>
         <StyledVirtualFilterItemWrapper style={{ height: `${rowVirtualizer.totalSize}px` }}>

diff --git a/packages/power-bi/src/lib/hooks/useClickOutside.ts b/packages/power-bi/src/lib/hooks/useClickOutside.ts
@@ -0,0 +1,30 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+const useClickOutside = (elementRef: RefObject<Element>, callback: () => void, isActive = true) => {
+  const callbackRef = useRef(callback);
+
+  const isClickInsideElement = (target: EventTarget | null): boolean => {
+    return elementRef.current ? elementRef.current.contains(target as Node) : false;
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (isActive && !isClickInsideElement(e.target)) {
+      callbackRef.current();
+    }
+  };
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (isActive) {
+      document.addEventListener('mouseup', handleClick);
+      return () => {
+        document.removeEventListener('mouseup', handleClick);
+      };
+    }
+  }, [isActive, elementRef]);
+};
+
+export default useClickOutside;