From ef22a5dc5262cf721d716476c558069515073bbc Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 13 Sep 2023 21:23:17 -0400
Subject: [PATCH] fix: Escape to exit popover in Safari fullscreen exits
 fullscreen instead.

closes #5812
---
 app/components/Popover.tsx               | 20 +++++++++++++++++++-
 app/editor/components/FindAndReplace.tsx |  2 --
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx
index 819739f55..eaa784c3c 100644
--- a/app/components/Popover.tsx
+++ b/app/components/Popover.tsx
@@ -4,6 +4,7 @@ import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
@@ -15,6 +16,8 @@ type Props = PopoverProps & {
   tabIndex?: number;
   scrollable?: boolean;
   mobilePosition?: "top" | "bottom";
+  show: () => void;
+  hide: () => void;
 };
 
 const Popover: React.FC<Props> = ({
@@ -28,6 +31,21 @@ const Popover: React.FC<Props> = ({
 }: Props) => {
   const isMobile = useMobile();
 
+  // Custom Escape handler rather than using hideOnEsc from reakit so we can
+  // prevent default behavior of exiting fullscreen.
+  useKeyDown(
+    "Escape",
+    (event) => {
+      if (rest.visible && rest.hideOnEsc !== false) {
+        event.preventDefault();
+        rest.hide();
+      }
+    },
+    {
+      allowInInput: true,
+    }
+  );
+
   if (isMobile) {
     return (
       <Dialog {...rest} modal>
@@ -44,7 +62,7 @@ const Popover: React.FC<Props> = ({
   }
 
   return (
-    <ReakitPopover {...rest}>
+    <ReakitPopover {...rest} hideOnEsc={false}>
       <Contents
         $shrink={shrink}
         $width={width}
diff --git a/app/editor/components/FindAndReplace.tsx b/app/editor/components/FindAndReplace.tsx
index 5e5fe72cb..0f5e9653b 100644
--- a/app/editor/components/FindAndReplace.tsx
+++ b/app/editor/components/FindAndReplace.tsx
@@ -65,8 +65,6 @@ export default function FindAndReplace({ readOnly }: Props) {
     }
   }, [show]);
 
-  // Close handlers
-  useKeyDown("Escape", popover.hide);
   useOnClickOutside(popover.unstable_referenceRef, popover.hide);
 
   // Keyboard shortcuts