From d542f450a186f20ce034381cf03e53e4e8fd92ad Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Wed, 6 Oct 2021 13:56:37 -0700
Subject: [PATCH] Focus-trap: Use allowOutsideClick where appropriate

---
 ts/components/ModalHost.tsx              | 7 ++++++-
 ts/components/emoji/EmojiPicker.tsx      | 6 +++++-
 ts/components/stickers/StickerPicker.tsx | 6 +++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ts/components/ModalHost.tsx b/ts/components/ModalHost.tsx
index f612c482f..465a75bec 100644
--- a/ts/components/ModalHost.tsx
+++ b/ts/components/ModalHost.tsx
@@ -58,7 +58,12 @@ export const ModalHost = React.memo(
 
     return root
       ? createPortal(
-          <FocusTrap>
+          <FocusTrap
+            focusTrapOptions={{
+              // This is alright because the overlay covers the entire screen
+              allowOutsideClick: false,
+            }}
+          >
             <div
               role="presentation"
               className={classNames(
diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx
index 986372f28..461ea6168 100644
--- a/ts/components/emoji/EmojiPicker.tsx
+++ b/ts/components/emoji/EmojiPicker.tsx
@@ -303,7 +303,11 @@ export const EmojiPicker = React.memo(
       );
 
       return (
-        <FocusTrap>
+        <FocusTrap
+          focusTrapOptions={{
+            allowOutsideClick: true,
+          }}
+        >
           <div className="module-emoji-picker" ref={ref} style={style}>
             <header className="module-emoji-picker__header">
               <button
diff --git a/ts/components/stickers/StickerPicker.tsx b/ts/components/stickers/StickerPicker.tsx
index 3e8915552..f3cbd6f9c 100644
--- a/ts/components/stickers/StickerPicker.tsx
+++ b/ts/components/stickers/StickerPicker.tsx
@@ -148,7 +148,11 @@ export const StickerPicker = React.memo(
       const showLongText = showPickerHint;
 
       return (
-        <FocusTrap>
+        <FocusTrap
+          focusTrapOptions={{
+            allowOutsideClick: true,
+          }}
+        >
           <div className="module-sticker-picker" ref={ref} style={style}>
             <div className="module-sticker-picker__header">
               <div className="module-sticker-picker__header__packs">