From 42bcfa18896aec19222ad03f1abeb94243c8e0a6 Mon Sep 17 00:00:00 2001
From: robofinch <86991566+robofinch@users.noreply.github.com>
Date: Sat, 20 Jul 2024 03:16:02 -0500
Subject: [PATCH] BUGFIX: Prevent runtime NotAllowedError on Safari (#1507)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Could occur when the browser’s window is resized.
---
 src/ui/React/Overview.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/ui/React/Overview.tsx b/src/ui/React/Overview.tsx
index 073500917..c20a76ae1 100644
--- a/src/ui/React/Overview.tsx
+++ b/src/ui/React/Overview.tsx
@@ -94,7 +94,11 @@ export function Overview({ children, mode }: IProps): React.ReactElement {
         triggerMouseEvent(node, "mousedown");
         triggerMouseEvent(document, "mousemove");
         triggerMouseEvent(node, "mouseup");
-        triggerMouseEvent(node, "click");
+        // According to a comment in the above GitHub issue, apparently mousemove is important,
+        // but click probably isn't. This click causes a runtime error in Safari (NotAllowedError),
+        // but not Chromium. If further errors occur, a more thorough fix, possibly using
+        // navigator.userActivation.isActive, might be necessary.
+        // triggerMouseEvent(node, "click");
       }, 100),
     [],
   );
@@ -111,8 +115,7 @@ export function Overview({ children, mode }: IProps): React.ReactElement {
   }, [fakeDrag]);
 
   const triggerMouseEvent = (node: HTMLDivElement | Document, eventType: string): void => {
-    const clickEvent = document.createEvent("MouseEvents");
-    clickEvent.initEvent(eventType, true, true);
+    const clickEvent = new MouseEvent(eventType, { bubbles: true, cancelable: true });
     node.dispatchEvent(clickEvent);
   };