From 27cb1bd27698991c5da3aca9bb53d915bc3f287e Mon Sep 17 00:00:00 2001
From: Ansh <anshnanda10@gmail.com>
Date: Tue, 12 Sep 2023 02:01:14 +0530
Subject: [PATCH] make sure click events on the emoji picker don't bubble up to
 the mask (#1427)

---
 .../text-input/web/EmojiPicker.web.tsx        | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
index a0d1f67d67..bfd3b9c6e9 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -58,21 +58,27 @@ export function EmojiPicker({close}: {close: () => void}) {
     // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors
     <TouchableWithoutFeedback onPress={close} accessibilityViewIsModal>
       <View style={styles.mask}>
-        <View
-          style={[
-            styles.picker,
-            {
-              paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325,
-              display: noPicker ? 'none' : 'flex',
-            },
-          ]}>
-          <Picker
-            // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file
-            data={window.emojiMartData}
-            onEmojiSelect={onInsert}
-            autoFocus={false}
-          />
-        </View>
+        {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
+        <TouchableWithoutFeedback
+          onPress={e => {
+            e.stopPropagation() // prevent event from bubbling up to the mask
+          }}>
+          <View
+            style={[
+              styles.picker,
+              {
+                paddingTop: noPadding ? 0 : reducedPadding ? 150 : 325,
+                display: noPicker ? 'none' : 'flex',
+              },
+            ]}>
+            <Picker
+              // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file
+              data={window.emojiMartData}
+              onEmojiSelect={onInsert}
+              autoFocus={false}
+            />
+          </View>
+        </TouchableWithoutFeedback>
       </View>
     </TouchableWithoutFeedback>
   )