From 1297869be62a86742f4d9f438dbea06e535fd3fe Mon Sep 17 00:00:00 2001 From: Gustav Eikaas Date: Fri, 18 Aug 2023 14:03:19 +0200 Subject: [PATCH] fix: :bug: fix grouping selector not closing on outside click --- packages/workspace-fusion/CHANGELOG.md | 4 +++ packages/workspace-fusion/package.json | 2 +- .../lib/hooks/useGardenPopoverOutsideClick.ts | 26 +++++++++++++++++++ .../garden/components/GroupingSelector.tsx | 20 ++++++++++++++ .../workspace-header/GardenViewSettings.tsx | 6 ++++- 5 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 packages/workspace-fusion/src/lib/hooks/useGardenPopoverOutsideClick.ts diff --git a/packages/workspace-fusion/CHANGELOG.md b/packages/workspace-fusion/CHANGELOG.md index 81295ffe5..22ac86d8c 100644 --- a/packages/workspace-fusion/CHANGELOG.md +++ b/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 diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json index 152823357..83e24bcf2 100644 --- a/packages/workspace-fusion/package.json +++ b/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", diff --git a/packages/workspace-fusion/src/lib/hooks/useGardenPopoverOutsideClick.ts b/packages/workspace-fusion/src/lib/hooks/useGardenPopoverOutsideClick.ts new file mode 100644 index 000000000..616ed7965 --- /dev/null +++ b/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[] +) => { + 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]); +}; diff --git a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx b/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx index 2cfe27440..5edb516d5 100644 --- a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx +++ b/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; @@ -13,6 +15,9 @@ type GroupingSelectorProps = { type: string | null; onChangeDimension: (dimension: string | null) => void; onChangeMode: (type: string | null) => void; + popoverRef: React.MutableRefObject; + iconRef: React.MutableRefObject; + 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 ( option.groupingKey)} label={'Column headers'} diff --git a/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx b/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx index fa1e4291a..426fb0fe7 100644 --- a/packages/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx +++ b/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(groupingKeys$.value); + const popoverRef = useRef(null); useEffect(() => { const sub = groupingKeys$.pipe(distinctUntilChanged()).subscribe((r) => { @@ -53,7 +54,7 @@ export const GardenPopoverItem = ({ onClick={() => setIsOpen((s) => !s)} /> {createPortal( - + Garden settings @@ -67,6 +68,9 @@ export const GardenPopoverItem = ({ }> setIsOpen(false)} + popoverRef={popoverRef} groupingKeys={groupState.groupingKeys} setGroupingKeys={setGroupingKeys} dimension={groupState.dimension}