fix(core): add useClickOutside function to filter buttons

sanity-io · Jan 9, 2024 · afdb3f9 · afdb3f9
1 parent 5719a09
commit afdb3f9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/...src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx b/...src/core/studio/components/navbar/search/components/filters/addFilter/AddFilterButton.tsx
@@ -1,5 +1,6 @@
 import {AddIcon} from '@sanity/icons'
 import React, {useCallback, useState} from 'react'
+import {useClickOutside} from '@sanity/ui'
 import {POPOVER_RADIUS, POPOVER_VERTICAL_MARGIN} from '../../../constants'
 import {useSearchState} from '../../../contexts/search/useSearchState'
 import {FilterPopoverWrapper} from '../common/FilterPopoverWrapper'
@@ -10,6 +11,7 @@ import {AddFilterPopoverContent} from './AddFilterPopoverContent'
 export function AddFilterButton() {
   const [open, setOpen] = useState(false)
   const [buttonElement, setButtonElement] = useState<HTMLElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(null)
   const {t} = useTranslation()
 
   const {
@@ -19,6 +21,8 @@ export function AddFilterButton() {
   const handleClose = useCallback(() => setOpen(false), [])
   const handleOpen = useCallback(() => setOpen(true), [])
 
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
   return (
     <Popover
       __unstable_margins={[POPOVER_VERTICAL_MARGIN, 0, 0, 0]}
@@ -30,6 +34,7 @@ export function AddFilterButton() {
       open={open}
       placement="bottom-start"
       radius={POPOVER_RADIUS}
+      ref={setPopoverElement}
       portal
     >
       <Button

diff --git a/...anity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx b/...anity/src/core/studio/components/navbar/search/components/filters/filter/FilterButton.tsx
@@ -4,6 +4,7 @@ import {
   Button, // Button with specific styling and children behavior.
   Card,
   rem,
+  useClickOutside,
 } from '@sanity/ui'
 import React, {KeyboardEvent, useCallback, useState} from 'react'
 import styled from 'styled-components'
@@ -46,6 +47,8 @@ const LabelButton = styled(Button)`
 
 export function FilterButton({filter, initialOpen}: FilterButtonProps) {
   const [open, setOpen] = useState(initialOpen)
+  const [buttonElement, setButtonElement] = useState<HTMLElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(null)
 
   const {
     dispatch,
@@ -73,6 +76,8 @@ export function FilterButton({filter, initialOpen}: FilterButtonProps) {
     [handleRemove],
   )
 
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
   const isValid = validateFilter({
     fieldDefinitions: definitions.fields,
     filter,
@@ -84,7 +89,7 @@ export function FilterButton({filter, initialOpen}: FilterButtonProps) {
     <Popover
       __unstable_margins={[POPOVER_VERTICAL_MARGIN, 0, 0, 0]}
       content={
-        <FilterPopoverWrapper onClose={handleClose}>
+        <FilterPopoverWrapper anchorElement={buttonElement} onClose={handleClose}>
           <FilterPopoverContent filter={filter} />
         </FilterPopoverWrapper>
       }
@@ -94,6 +99,7 @@ export function FilterButton({filter, initialOpen}: FilterButtonProps) {
       placement="bottom-start"
       portal
       radius={POPOVER_RADIUS}
+      ref={setPopoverElement}
     >
       <ContainerDiv>
         <Card
@@ -109,6 +115,7 @@ export function FilterButton({filter, initialOpen}: FilterButtonProps) {
             paddingLeft={fullscreen ? 3 : 2}
             paddingRight={fullscreen ? 3 : 5}
             paddingY={fullscreen ? 3 : 2}
+            ref={setButtonElement}
           >
             <FilterLabel filter={filter} showContent={isValid} />
           </LabelButton>