From 8ecb914059c7e99dd726419c781985d3131a4fa7 Mon Sep 17 00:00:00 2001
From: Daniel Ji <daji@ucsd.edu>
Date: Mon, 4 Nov 2024 11:41:31 -0800
Subject: [PATCH] fix: header dropdown misplacement on icon click (#1297)

Resolves
https://github.com/chanzuckerberg/cryoet-data-portal/issues/1247.

Dropdown misplacement would occur when the `Icon` itself was clicked,
not the text, resulting in a bad anchor element.
---
 .../packages/data-portal/app/components/MenuDropdown.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/MenuDropdown.tsx b/frontend/packages/data-portal/app/components/MenuDropdown.tsx
index 6bea74258..fb71927e2 100644
--- a/frontend/packages/data-portal/app/components/MenuDropdown.tsx
+++ b/frontend/packages/data-portal/app/components/MenuDropdown.tsx
@@ -1,5 +1,5 @@
 import { Icon, Menu } from '@czi-sds/components'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useRef, useState } from 'react'
 
 import { cns } from 'app/utils/cns'
 
@@ -13,15 +13,17 @@ export function MenuDropdown({
   title: ReactNode
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   return (
     <div className={className}>
       <button
         className="!p-0 flex items-center gap-2 group"
-        onClick={(event) => setAnchorEl(event.target as HTMLElement | null)}
+        onClick={() => setAnchorEl(menuRef.current)}
         type="button"
       >
         <span
+          ref={menuRef}
           className={cns(
             'font-semibold',