handle onPointerDown dropdown menu more gracefully

xvvvyz · Aug 1, 2024 · 6e07884 · 6e07884
1 parent 79c38bf
commit 6e07884
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/app/_components/account-menu.tsx b/app/_components/account-menu.tsx
@@ -28,6 +28,7 @@ const AccountMenu = ({ user }: AccountMenuProps) => {
 
   return (
     <DropdownMenu
+      disableOnPointerDown={false}
       trigger={
         <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1 active:bg-alpha-1">
           <Bars3Icon className="w-5" />

diff --git a/app/_components/dropdown-menu.tsx b/app/_components/dropdown-menu.tsx
@@ -3,8 +3,8 @@
 import ButtonPrimitive from '@/_components/button';
 import ForwardSearchParamsButtonPrimitive from '@/_components/forward-search-params-button';
 import * as Primitive from '@radix-ui/react-dropdown-menu';
-import { useToggle } from '@uidotdev/usehooks';
 import * as React from 'react';
+import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 const Button = React.forwardRef<
@@ -80,23 +80,28 @@ Label.displayName = Primitive.Label.displayName;
 const Root = React.forwardRef<
   React.ElementRef<typeof Primitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof Primitive.Root> & {
+    disableOnPointerDown?: boolean;
     trigger: React.ReactNode;
   }
->(({ children, trigger, ...props }, ref) => {
-  const [open, toggleOpen] = useToggle(false);
+>(({ children, disableOnPointerDown = true, trigger, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
 
   return (
     <Primitive.Root
       modal={false}
-      onOpenChange={toggleOpen}
-      open={open}
+      onOpenChange={disableOnPointerDown ? setOpen : undefined}
+      open={disableOnPointerDown ? open : undefined}
       {...props}
     >
       <Primitive.Trigger
         asChild
         className="cursor-pointer outline-none"
-        onClick={() => toggleOpen()}
-        onPointerDown={(e) => e.preventDefault()}
+        onClick={
+          disableOnPointerDown ? () => setOpen((state) => !state) : undefined
+        }
+        onPointerDown={
+          disableOnPointerDown ? (e) => e.preventDefault() : undefined
+        }
         ref={ref}
       >
         {trigger}

diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
@@ -65,7 +65,7 @@ const SessionMenu = <T extends FieldValues>({
         }
       >
         <DropdownMenu.Content
-          className={form || isView ? '-mr-[3.7rem] -mt-14' : '-mt-12 mr-1.5'}
+          className={form || isView ? '-mr-[3.7rem] -mt-14' : '-mt-20 mr-2'}
         >
           {form ? (
             !isDraft && (

diff --git a/app/_components/subject-menu.tsx b/app/_components/subject-menu.tsx
@@ -29,13 +29,15 @@ interface SubjectMenuProps {
   canUnarchive?: boolean;
   children: ReactNode;
   contentClassName?: string;
+  disableOnPointerDown?: boolean;
   subject: NonNullable<GetSubjectData> | NonNullable<ListSubjectsData>[0];
 }
 
 const SubjectMenu = ({
   canUnarchive,
   children,
   contentClassName,
+  disableOnPointerDown,
   subject,
 }: SubjectMenuProps) => {
   const [, copyToClipboard] = useCopyToClipboard();
@@ -54,7 +56,10 @@ const SubjectMenu = ({
 
   return (
     <>
-      <DropdownMenu trigger={children}>
+      <DropdownMenu
+        disableOnPointerDown={disableOnPointerDown}
+        trigger={children}
+      >
         <DropdownMenu.Content className={contentClassName}>
           <DropdownMenu.Button
             href={`/subjects/${subject.id}/edit`}

diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
@@ -84,6 +84,7 @@ const SubjectPage = async ({
               (unarchivedTeamSubjectsCount ?? 0) < 2
             }
             contentClassName="mt-0.5"
+            disableOnPointerDown={false}
             subject={subject}
           >
             <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1 active:bg-alpha-1">