fix: 🐛 fix grouping selector not closing on outside click

packages/workspace-fusion/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [4.0.3]
+
+fix: outside click on garden popover grouping selector
+
 ## [1.0.13]
 
 fix: double fetch on init

packages/workspace-fusion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

packages/workspace-fusion/src/lib/hooks/useGardenPopoverOutsideClick.ts

@@ -0,0 +1,26 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export const useOutsideClick = (
+  handler: (e: MouseEvent, el: HTMLElement) => void,
+  ...refs: MutableRefObject<HTMLElement | null>[]
+) => {
+  const onOutsideClick = (e: MouseEvent) => {
+    /** Eds input LI is removed from dom before callback runs */
+    if (!document.contains(e.target as Node)) {
+      return;
+    }
+
+    // updated this to use the passed componentRef
+    const inMain = refs.some((s) => s.current?.contains(e.target as HTMLElement));
+    const isOutside = !inMain;
+    if (isOutside) {
+      handler(e, e.target as HTMLElement);
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('click', onOutsideClick);
+    return () => {
+      document.removeEventListener('click', onOutsideClick);
+    };
+  }, [refs]);
+};

packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx

@@ -2,7 +2,9 @@ import { Autocomplete, Radio } from '@equinor/eds-core-react';
 import { FilterState } from '@equinor/workspace-filter';
 import { GardenDataSource, GroupingOption } from '@equinor/workspace-garden';
 import { useQuery } from '@tanstack/react-query';
+import { useRef } from 'react';
 import styled from 'styled-components';
+import { useOutsideClick } from '../../../lib/hooks/useGardenPopoverOutsideClick';
 
 type GroupingSelectorProps = {
   dataSource: GardenDataSource<FilterState>;
@@ -13,6 +15,9 @@ type GroupingSelectorProps = {
   type: string | null;
   onChangeDimension: (dimension: string | null) => void;
   onChangeMode: (type: string | null) => void;
+  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
+  iconRef: React.MutableRefObject<HTMLDivElement | null>;
+  close: VoidFunction;
 };
 
 export function GroupingSelector({
@@ -24,6 +29,9 @@ export function GroupingSelector({
   onChangeDimension,
   onChangeMode,
   groupingKeys,
+  iconRef,
+  popoverRef,
+  close,
 }: GroupingSelectorProps): JSX.Element | null {
   const { data } = useQuery(['garden', ...groupingKeys, dimension, type, context], {
     refetchOnWindowFocus: false,
@@ -34,6 +42,17 @@ export function GroupingSelector({
       dataSource.getGardenMeta({ groupingKeys, dimension, type }, context, signal ?? new AbortSignal()),
   });
 
+  const selectorRef = useRef(null);
+
+  useOutsideClick(
+    (e, a) => {
+      console.log('outside click', a);
+      close();
+    },
+    popoverRef,
+    iconRef
+  );
+
   const setGardenKey = (key: string) => {
     const foundGroupingOption = data?.allGroupingOptions.find((option) => option.groupingKey === key);
     if (!foundGroupingOption) {
@@ -72,6 +91,7 @@ export function GroupingSelector({
   return (
     <StyledAutoCompleteWrapper>
       <Autocomplete
+        ref={selectorRef}
         key={groupingKeys[0]}
         options={data.allGroupingOptions.map((option: GroupingOption) => option.groupingKey)}
         label={'Column headers'}

packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx

@@ -36,6 +36,7 @@ export const GardenPopoverItem = ({
   const [isOpen, setIsOpen] = useState(false);
   const pRef = useRef(null);
   const [groupState, setGroupState] = useState<GroupState>(groupingKeys$.value);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     const sub = groupingKeys$.pipe(distinctUntilChanged()).subscribe((r) => {
@@ -53,7 +54,7 @@ export const GardenPopoverItem = ({
         onClick={() => setIsOpen((s) => !s)}
       />
       {createPortal(
-        <Popover style={{ height: '450px', width: '300px' }} open={isOpen} anchorEl={pRef.current}>
+        <Popover ref={popoverRef} style={{ height: '450px', width: '300px' }} open={isOpen} anchorEl={pRef.current}>
           <Popover.Header>
             <StyledPopoverHeaderLine>
               <Popover.Title>Garden settings</Popover.Title>
@@ -67,6 +68,9 @@ export const GardenPopoverItem = ({
           <Popover.Content style={{ overflow: 'hidden' }}>
             <Suspense fallback={<GroupingSelectorLoading />}>
               <GroupingSelector
+                iconRef={pRef}
+                close={() => setIsOpen(false)}
+                popoverRef={popoverRef}
                 groupingKeys={groupState.groupingKeys}
                 setGroupingKeys={setGroupingKeys}
                 dimension={groupState.dimension}