From 1b6047abf3967421c916a2b8ecca4f342baad194 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 20 Apr 2026 18:55:50 -0500
Subject: [PATCH] remove workarounds for radix pointer events issues on
 dropdown and context menus

---
 web/src/components/card/ExportCard.tsx                   | 2 +-
 web/src/components/card/ReviewCard.tsx                   | 2 +-
 web/src/components/filter/CameraGroupSelector.tsx        | 2 +-
 web/src/components/filter/CamerasFilterButton.tsx        | 1 -
 web/src/components/menu/AccountSettings.tsx              | 2 +-
 web/src/components/menu/GeneralSettings.tsx              | 2 +-
 web/src/components/menu/LiveContextMenu.tsx              | 2 +-
 web/src/components/menu/SearchResultActions.tsx          | 4 ++--
 web/src/components/overlay/ActionsDropdown.tsx           | 2 +-
 .../components/overlay/ClassificationSelectionDialog.tsx | 1 -
 web/src/components/overlay/FaceSelectionDialog.tsx       | 1 -
 web/src/components/overlay/PtzControlPanel.tsx           | 9 +++------
 web/src/components/player/VideoControls.tsx              | 3 +--
 web/src/components/settings/PolygonItem.tsx              | 4 ++--
 web/src/components/settings/ProfileSectionDropdown.tsx   | 2 +-
 web/src/components/ws/WsMessageFeed.tsx                  | 2 --
 web/src/pages/FaceLibrary.tsx                            | 2 +-
 web/src/pages/Settings.tsx                               | 1 -
 web/src/views/classification/ModelSelectionView.tsx      | 2 +-
 web/src/views/classification/ModelTrainingView.tsx       | 2 +-
 web/src/views/live/LiveCameraView.tsx                    | 2 +-
 21 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 966aab4dcc..893f251f8f 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -266,7 +266,7 @@ export function ExportCard({
         )}
         {!exportedRecording.in_progress && !selectionMode && (
           <div className="absolute bottom-2 right-3 z-40">
-            <DropdownMenu modal={false}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <BlurredIconButton
                   aria-label={t("tooltip.editName")}
diff --git a/web/src/components/card/ReviewCard.tsx b/web/src/components/card/ReviewCard.tsx
index 6fb72a6fa2..fa2a675bea 100644
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@@ -275,7 +275,7 @@ export default function ReviewCard({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
-        <ContextMenu key={event.id} modal={false}>
+        <ContextMenu key={event.id}>
           <ContextMenuTrigger asChild>{content}</ContextMenuTrigger>
           <ContextMenuContent>
             <ContextMenuItem>
diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index 5c092ac1f1..9d9189c8aa 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -592,7 +592,7 @@ export function CameraGroupRow({
 
         {isMobile && !isReadOnly && (
           <>
-            <DropdownMenu modal={!isDesktop}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
index cc89e13cf5..c8d3114634 100644
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@@ -136,7 +136,6 @@ export function CamerasFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) {
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index be05422b93..4d876a1fc2 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -81,7 +81,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   };
 
   return (
-    <Container modal={!isDesktop}>
+    <Container>
       <Tooltip>
         <Trigger asChild>
           <TooltipTrigger asChild>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index d5ca1ced6a..a84cd0aa25 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -205,7 +205,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
 
   return (
     <>
-      <Container modal={!isDesktop}>
+      <Container>
         <Trigger>
           <Tooltip>
             <TooltipTrigger asChild>
diff --git a/web/src/components/menu/LiveContextMenu.tsx b/web/src/components/menu/LiveContextMenu.tsx
index 982895200d..8ed78e348c 100644
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@@ -272,7 +272,7 @@ export default function LiveContextMenu({
 
   return (
     <div className={cn("w-full", className)}>
-      <ContextMenu key={camera} modal={false} onOpenChange={handleOpenChange}>
+      <ContextMenu key={camera} onOpenChange={handleOpenChange}>
         <ContextMenuTrigger>{children}</ContextMenuTrigger>
         <ContextMenuContent>
           <div className="flex flex-col items-start gap-1 py-1 pl-2">
diff --git a/web/src/components/menu/SearchResultActions.tsx b/web/src/components/menu/SearchResultActions.tsx
index 2a8cca5a8e..aa2562b428 100644
--- a/web/src/components/menu/SearchResultActions.tsx
+++ b/web/src/components/menu/SearchResultActions.tsx
@@ -258,13 +258,13 @@ export default function SearchResultActions({
         </AlertDialogContent>
       </AlertDialog>
       {isContextMenu ? (
-        <ContextMenu modal={false}>
+        <ContextMenu>
           <ContextMenuTrigger>{children}</ContextMenuTrigger>
           <ContextMenuContent>{menuItems}</ContextMenuContent>
         </ContextMenu>
       ) : (
         <>
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
                 <FiMoreVertical className="size-5" />
diff --git a/web/src/components/overlay/ActionsDropdown.tsx b/web/src/components/overlay/ActionsDropdown.tsx
index 7f841be4fb..9f9596d0ac 100644
--- a/web/src/components/overlay/ActionsDropdown.tsx
+++ b/web/src/components/overlay/ActionsDropdown.tsx
@@ -22,7 +22,7 @@ export default function ActionsDropdown({
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
   return (
-    <DropdownMenu modal={false}>
+    <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           className="flex items-center gap-2"
diff --git a/web/src/components/overlay/ClassificationSelectionDialog.tsx b/web/src/components/overlay/ClassificationSelectionDialog.tsx
index a7a208e2f8..e647100261 100644
--- a/web/src/components/overlay/ClassificationSelectionDialog.tsx
+++ b/web/src/components/overlay/ClassificationSelectionDialog.tsx
@@ -130,7 +130,6 @@ export default function ClassificationSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
-            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
diff --git a/web/src/components/overlay/FaceSelectionDialog.tsx b/web/src/components/overlay/FaceSelectionDialog.tsx
index b76ee9c5d6..aa816023cf 100644
--- a/web/src/components/overlay/FaceSelectionDialog.tsx
+++ b/web/src/components/overlay/FaceSelectionDialog.tsx
@@ -91,7 +91,6 @@ export default function FaceSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
-            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
diff --git a/web/src/components/overlay/PtzControlPanel.tsx b/web/src/components/overlay/PtzControlPanel.tsx
index 32e2c26f11..c6a11d89c6 100644
--- a/web/src/components/overlay/PtzControlPanel.tsx
+++ b/web/src/components/overlay/PtzControlPanel.tsx
@@ -14,7 +14,7 @@ import {
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraPtzInfo } from "@/types/ptz";
 import React, { useCallback } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import {
   FaAngleDown,
@@ -292,7 +292,7 @@ export default function PtzControlPanel({
         </Tooltip>
       )}
       {(ptz?.presets?.length ?? 0) > 0 && (
-        <DropdownMenu modal={!isDesktop}>
+        <DropdownMenu>
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
@@ -306,10 +306,7 @@ export default function PtzControlPanel({
             </TooltipContent>
           </Tooltip>
 
-          <DropdownMenuContent
-            className="scrollbar-container max-h-[40dvh] overflow-y-auto"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
+          <DropdownMenuContent className="scrollbar-container max-h-[40dvh] overflow-y-auto">
             {ptz?.presets.map((preset) => (
               <DropdownMenuItem
                 key={preset}
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index a92819a313..5a45e83ac9 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { LuFolderX } from "react-icons/lu";
-import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
+import { isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
   DropdownMenu,
@@ -246,7 +246,6 @@ export default function VideoControls({
       )}
       {features.playbackRate && (
         <DropdownMenu
-          modal={!isDesktop}
           onOpenChange={(open) => {
             if (setControlsOpen) {
               setControlsOpen(open);
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 54a6b41a23..af2e7813ac 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -19,7 +19,7 @@ import { LuCopy, LuPencil } from "react-icons/lu";
 import { FaDrawPolygon, FaObjectGroup } from "react-icons/fa";
 import { BsPersonBoundingBox } from "react-icons/bs";
 import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { toRGBColorString } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
@@ -524,7 +524,7 @@ export default function PolygonItem({
 
         {isMobile && (
           <>
-            <DropdownMenu modal={!isDesktop}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/components/settings/ProfileSectionDropdown.tsx b/web/src/components/settings/ProfileSectionDropdown.tsx
index cab681f465..923a37ebf3 100644
--- a/web/src/components/settings/ProfileSectionDropdown.tsx
+++ b/web/src/components/settings/ProfileSectionDropdown.tsx
@@ -41,7 +41,7 @@ export function ProfileSectionDropdown({
     : null;
 
   return (
-    <DropdownMenu modal={false}>
+    <DropdownMenu>
       <DropdownMenuTrigger asChild>
         {iconOnly ? (
           <Button variant="outline" size="sm">
diff --git a/web/src/components/ws/WsMessageFeed.tsx b/web/src/components/ws/WsMessageFeed.tsx
index 0da86a108c..47a3b41aec 100644
--- a/web/src/components/ws/WsMessageFeed.tsx
+++ b/web/src/components/ws/WsMessageFeed.tsx
@@ -351,7 +351,6 @@ function TopicFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) setCurrentTopics(selectedTopics);
@@ -517,7 +516,6 @@ function WsCamerasFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) setCurrentCameras(selectedCameras);
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index ee92136265..20763261c8 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -594,7 +594,7 @@ function LibrarySelector({
         forbiddenErrorMessage={t("description.nameCannotContainHash")}
       />
 
-      <DropdownMenu modal={false}>
+      <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
             {pageTitle}
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index c74191957e..3c6e4d83fe 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -2018,7 +2018,6 @@ function CameraSelectButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open: boolean) => {
         if (!open) {
diff --git a/web/src/views/classification/ModelSelectionView.tsx b/web/src/views/classification/ModelSelectionView.tsx
index 4b4ef492d9..3cd450bba0 100644
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -342,7 +342,7 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
           {config.name}
         </div>
         <div className="absolute bottom-2 right-2 z-40">
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
               <BlurredIconButton>
                 <FiMoreVertical className="size-5 text-white" />
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 23fd6f3746..dd4f3c9c00 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -698,7 +698,7 @@ function LibrarySelector({
         regexErrorMessage={t("description.invalidName")}
       />
 
-      <DropdownMenu modal={false}>
+      <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
             {pageTitle}
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 629da6e57b..2be1f70aea 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -1164,7 +1164,7 @@ function FrigateCameraFeatures({
           loading={isSnapshotLoading}
         />
         {!fullscreen && (
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger>
               <div
                 className={cn(