From 2a30016afb9036a9ff14bb328d55d846a80de565 Mon Sep 17 00:00:00 2001
From: craigmccahill <craig.mccahill@gmail.com>
Date: Fri, 2 Dec 2022 12:32:59 +0000
Subject: [PATCH] fix: close mobile filter dropdown when menu opens

---
 .../MobileBlogFilters/MobileBlogFilters.tsx    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/MobileBlogFilters/MobileBlogFilters.tsx b/src/components/MobileBlogFilters/MobileBlogFilters.tsx
index 2765a9e473..2ef7f8e658 100644
--- a/src/components/MobileBlogFilters/MobileBlogFilters.tsx
+++ b/src/components/MobileBlogFilters/MobileBlogFilters.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useRef, useEffect, useId } from "react";
+import { FC, useState, useRef, useEffect, useId, useCallback } from "react";
 
 import Box from "../Box";
 import Button from "../Button";
@@ -10,6 +10,7 @@ import PostCategoryList, {
   PostCategoryListProps,
   PostCategoryPage,
 } from "../Posts/PostCategoryList/PostCategoryList";
+import { useMenuContext } from "../../context/Menu";
 
 export type MobileBlogFiltersProps = {
   categoryListProps: Omit<PostCategoryListProps, "labelledBy" | "page">;
@@ -19,6 +20,10 @@ export type MobileBlogFiltersProps = {
 const MobileBlogFilters: FC<MobileBlogFiltersProps> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [categoryListHeight, setCategoryListHeight] = useState<number>(0);
+
+  const { open } = useMenuContext();
+  const menuOpen = open; //rename here to save confusion
+
   const categoryListRef = useRef<HTMLDivElement>(null);
   const checkAndSetHeight = () => {
     if (categoryListRef.current) {
@@ -37,9 +42,16 @@ const MobileBlogFilters: FC<MobileBlogFiltersProps> = (props) => {
   const menuId = useId();
   const triggerId = useId();
 
-  const close = () => {
+  const close = useCallback(() => {
     setIsOpen(false);
-  };
+  }, [setIsOpen]);
+
+  // Close the dropdown if the menu is open
+  useEffect(() => {
+    if (isOpen && menuOpen) {
+      close();
+    }
+  }, [isOpen, menuOpen, close]);
 
   return (
     <Flex