From 904316b9036ad3c7b87ae371d59354094af4a39a Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Sat, 9 Mar 2024 12:55:58 +0530
Subject: [PATCH 1/2] fix: Room - Side panel does not close when clicking
 outside of panel.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/Modal/BaseModal.tsx                | 4 ++++
 src/components/Modal/types.ts                     | 3 +++
 src/components/ValuePicker/ValueSelectorModal.tsx | 3 ++-
 src/components/ValuePicker/index.tsx              | 2 ++
 src/components/ValuePicker/types.ts               | 3 +++
 5 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 2b8d25d5d639..514bcc421e09 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -41,6 +41,7 @@ function BaseModal(
         avoidKeyboard = false,
         children,
         shouldUseCustomBackdrop = false,
+        onBackdropPress,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -117,6 +118,9 @@ function BaseModal(
             return;
         }
 
+        if (onBackdropPress) {
+            onBackdropPress();
+        }
         onClose();
     };
 
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index a0cdb737d448..cfa4a28c4d87 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -23,6 +23,9 @@ type BaseModalProps = Partial<ModalProps> & {
     /** Callback method fired when the user requests to close the modal */
     onClose: () => void;
 
+    /** Function to call when the user presses on the modal backdrop */
+    onBackdropPress?: () => void;
+
     /** State that determines whether to display the modal or not */
     isVisible: boolean;
 
diff --git a/src/components/ValuePicker/ValueSelectorModal.tsx b/src/components/ValuePicker/ValueSelectorModal.tsx
index fad59d4e48e4..2891a452a0ea 100644
--- a/src/components/ValuePicker/ValueSelectorModal.tsx
+++ b/src/components/ValuePicker/ValueSelectorModal.tsx
@@ -8,7 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {ValueSelectorModalProps} from './types';
 
-function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, onClose, onItemSelected, shouldShowTooltips = true}: ValueSelectorModalProps) {
+function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, onClose, onItemSelected, shouldShowTooltips = true, onBackdropPress}: ValueSelectorModalProps) {
     const styles = useThemeStyles();
 
     const sections = useMemo(
@@ -24,6 +24,7 @@ function ValueSelectorModal({items = [], selectedItem, label = '', isVisible, on
             onModalHide={onClose}
             hideModalContentWhileAnimating
             useNativeDriver
+            onBackdropPress={onBackdropPress}
         >
             <ScreenWrapper
                 style={styles.pb0}
diff --git a/src/components/ValuePicker/index.tsx b/src/components/ValuePicker/index.tsx
index cc8a0edf0b97..4fb5a8b588b3 100644
--- a/src/components/ValuePicker/index.tsx
+++ b/src/components/ValuePicker/index.tsx
@@ -5,6 +5,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import type {ValuePickerItem, ValuePickerProps} from './types';
 import ValueSelectorModal from './ValueSelectorModal';
@@ -55,6 +56,7 @@ function ValuePicker({value, label, items, placeholder = '', errorText = '', onI
                 onClose={hidePickerModal}
                 onItemSelected={updateInput}
                 shouldShowTooltips={shouldShowTooltips}
+                onBackdropPress={Navigation.dismissModal}
             />
         </View>
     );
diff --git a/src/components/ValuePicker/types.ts b/src/components/ValuePicker/types.ts
index c7df88bc7417..8e42f80097ac 100644
--- a/src/components/ValuePicker/types.ts
+++ b/src/components/ValuePicker/types.ts
@@ -30,6 +30,9 @@ type ValueSelectorModalProps = {
     /** Function to call when the user closes the modal */
     onClose?: () => void;
 
+    /** Function to call when the user presses on the modal backdrop */
+    onBackdropPress?: () => void;
+
     /** Whether to show the toolip text */
     shouldShowTooltips?: boolean;
 };

From cc63c22102c26694487608dc9d36f9d94d35f00d Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Fri, 15 Mar 2024 21:04:48 +0530
Subject: [PATCH 2/2] add suggested changes.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/Modal/BaseModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 514bcc421e09..4604e831a2ae 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -120,8 +120,9 @@ function BaseModal(
 
         if (onBackdropPress) {
             onBackdropPress();
+        } else {
+            onClose();
         }
-        onClose();
     };
 
     const handleDismissModal = () => {