Merge pull request #168 from lsst-sqre:tickets/DM-44392

DM-44392: Prevent opening/closing GafaelfawrUserMenu on hover.
lsst-sqre · Jul 3, 2024 · e204d8c · e204d8c
2 parents 78a2306 + f403ffd
commit e204d8c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/many-moles-join.md b/.changeset/many-moles-join.md
@@ -0,0 +1,5 @@
+---
+'@lsst-sqre/squared': minor
+---
+
+Disable opening and closing the GafaelfawrUserMenu on hover. This is a better UX because it allows for less precise mousing when using the menu.
diff --git a/packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.stories.tsx b/packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.stories.tsx
@@ -73,7 +73,7 @@ export const Default: Story = {
     <SWRConfig value={{ provider: () => new Map() }}>
       <GafaelfawrUserMenu {...args}>
         <GafaelfawrUserMenu.Link href="#">
-          Account Settings
+          Account settings
         </GafaelfawrUserMenu.Link>
         <GafaelfawrUserMenu.Link href="#">
           Security tokens

diff --git a/packages/squared/src/components/GafaelfawrUserMenu/Menu.tsx b/packages/squared/src/components/GafaelfawrUserMenu/Menu.tsx
@@ -21,17 +21,28 @@ export const Menu = ({ children, logoutHref, username }: MenuProps) => {
     <MenuRoot>
       <MenuList>
         <RadixNavigationMenu.Item>
-          <MenuTrigger>
+          <MenuTrigger
+            onPointerMove={(event) => event.preventDefault()}
+            onPointerEnter={(event) => event.preventDefault()}
+            onPointerLeave={(event) => event.preventDefault()}
+          >
             {username} <ChevronDown />
           </MenuTrigger>
-          <MenuContent>
+          <MenuContent
+            onPointerMove={(event) => event.preventDefault()}
+            onPointerEnter={(event) => event.preventDefault()}
+            onPointerLeave={(event) => event.preventDefault()}
+          >
             {children}
             <MenuLink href={logoutHref}>Log out</MenuLink>
           </MenuContent>
         </RadixNavigationMenu.Item>
       </MenuList>
       <ViewportContainer>
-        <ContentViewport />
+        <ContentViewport
+          onPointerEnter={(event) => event.preventDefault()}
+          onPointerLeave={(event) => event.preventDefault()}
+        />
       </ViewportContainer>
     </MenuRoot>
   );