From ee5a4f5d364465cce139a14e5c5b09d72ca3f141 Mon Sep 17 00:00:00 2001
From: "Robert W. Pearce" <me@robertwpearce.com>
Date: Fri, 28 Jul 2023 09:07:50 -0400
Subject: [PATCH] fix(430): ESC intermittently not working in Safari

There's a weird issue, probably related to Safari's `:focus-visible`
behavior or their `<dialog>` implementation, where the `<dialog>`
element's button doesn't receive focus when it's opened. It could also
be a race condition because of the animation.

Regardless, let's try listening for `Escape` at the `document` level
when we zoom an image. We need to make sure we provide the `useCapture`
option and get to the event first so we can intercept it and don't
trigger the default `<dialog>` `Escape` behavior so we can animate
zooming out.
---
 source/Controlled.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/Controlled.tsx b/source/Controlled.tsx
index f25085db..6b043fd8 100644
--- a/source/Controlled.tsx
+++ b/source/Controlled.tsx
@@ -3,7 +3,6 @@ import React, {
   Component,
   ElementType,
   ImgHTMLAttributes,
-  KeyboardEvent,
   MouseEvent,
   ReactElement,
   ReactNode,
@@ -153,7 +152,6 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     const {
       handleDialogCancel,
       handleDialogClick,
-      handleDialogKeyDown,
       handleUnzoom,
       handleZoom,
       imgEl,
@@ -304,7 +302,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
           </button>
         </WrapElement>}
         {hasImage && elDialogContainer != null && createPortal(
-          <dialog /* eslint-disable-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles */
+          <dialog /* eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles */
             aria-labelledby={idModalImg}
             aria-modal="true"
             className={classDialog}
@@ -313,7 +311,6 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
             onClick={handleDialogClick}
             onClose={handleUnzoom /* eslint-disable-line react/no-unknown-property */}
             onCancel={handleDialogCancel}
-            onKeyDown={handleDialogKeyDown}
             ref={refDialog}
             role="dialog"
           >
@@ -352,6 +349,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     window.removeEventListener('touchend', this.handleTouchMove)
     window.removeEventListener('touchcancel', this.handleTouchCancel)
     window.removeEventListener('resize', this.handleResize)
+    document.removeEventListener('keydown', this.handleKeyDown, true)
   }
 
   // ===========================================================================
@@ -503,7 +501,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
   /**
    * Intercept default dialog.close() and use ours so we can animate
    */
-  handleDialogKeyDown = (e: KeyboardEvent<HTMLDialogElement>) => {
+  handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape' || e.keyCode === 27) {
       e.preventDefault()
       e.stopPropagation()
@@ -585,6 +583,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     window.addEventListener('touchstart', this.handleTouchStart, { passive: true })
     window.addEventListener('touchend', this.handleTouchMove, { passive: true })
     window.addEventListener('touchcancel', this.handleTouchCancel, { passive: true })
+    document.addEventListener('keydown', this.handleKeyDown, true)
 
     this.refModalImg.current?.addEventListener?.('transitionend', this.handleZoomEnd, { once: true })
   }
@@ -612,6 +611,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     window.removeEventListener('touchstart', this.handleTouchStart)
     window.removeEventListener('touchend', this.handleTouchMove)
     window.removeEventListener('touchcancel', this.handleTouchCancel)
+    document.removeEventListener('keydown', this.handleKeyDown, true)
 
     this.refModalImg.current?.addEventListener?.('transitionend', this.handleUnzoomEnd, { once: true })
   }