From 23056daa292905b0019565dc0c42870037ed98fe Mon Sep 17 00:00:00 2001
From: Mary <148872143+mary-ext@users.noreply.github.com>
Date: Sun, 14 Apr 2024 07:13:05 +0700
Subject: [PATCH] fix: only close drawer if directly tapping backdrop (#3534)

---
 src/view/shell/index.web.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 51fb4a0a11..9dab23671f 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -51,15 +51,21 @@ function ShellInner() {
       <PortalOutlet />
 
       {!isDesktop && isDrawerOpen && (
-        <TouchableOpacity
-          onPress={() => setDrawerOpen(false)}
-          style={styles.drawerMask}
+        <TouchableWithoutFeedback
+          onPress={ev => {
+            // Only close if press happens outside of the drawer
+            if (ev.target === ev.currentTarget) {
+              setDrawerOpen(false)
+            }
+          }}
           accessibilityLabel={_(msg`Close navigation footer`)}
           accessibilityHint={_(msg`Closes bottom navigation bar`)}>
-          <View style={styles.drawerContainer}>
-            <DrawerContent />
+          <View style={styles.drawerMask}>
+            <View style={styles.drawerContainer}>
+              <DrawerContent />
+            </View>
           </View>
-        </TouchableOpacity>
+        </TouchableWithoutFeedback>
       )}
     </>
   )