pass outer-ref to useClickOutside

not doing so causes the filter menu to disappear in the case where React removes the clicked item from the dom before `useClickOutside` is called
rocicorp · Dec 19, 2023 · 44c53a8 · 44c53a8
1 parent af3256f
commit 44c53a8
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/client/src/widgets/filter-menu.tsx b/client/src/widgets/filter-menu.tsx
@@ -38,6 +38,7 @@ const FilterMenu = ({
   const [filter, setFilter] = useState<Filter | null>(null);
   const [filterDropDownVisible, setFilterDropDownVisible] = useState(false);
   const [view] = useViewState();
+  const bodyRef = useRef(document.body);
 
   const {styles, attributes, update} = usePopper(filterRef, popperRef, {
     placement: 'bottom-start',
@@ -50,12 +51,16 @@ const FilterMenu = ({
     setFilterDropDownVisible(!filterDropDownVisible);
   };
 
-  useClickOutside(ref, () => {
-    if (filterDropDownVisible) {
-      setFilter(null);
-      setFilterDropDownVisible(false);
-    }
-  });
+  useClickOutside(
+    ref,
+    () => {
+      if (filterDropDownVisible) {
+        setFilter(null);
+        setFilterDropDownVisible(false);
+      }
+    },
+    bodyRef,
+  );
 
   const filterBys = [
     [SignalStrongIcon, Filter.PRIORITY, 'Priority'],