Merge pull request Expensify#38015 from Krishna2323/krishna2323/re/is…

…sue/34394

fix: Room - Side panel does not close when clicking outside of panel.

src/components/Modal/BaseModal.tsx

@@ -41,6 +41,7 @@ function BaseModal(
         avoidKeyboard = false,
         children,
         shouldUseCustomBackdrop = false,
+        onBackdropPress,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -117,7 +118,11 @@ function BaseModal(
             return;
         }
 
-        onClose();
+        if (onBackdropPress) {
+            onBackdropPress();
+        } else {
+            onClose();
+        }
     };
 
     const handleDismissModal = () => {

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;
 

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}

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>
     );

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 tooltip text */
     shouldShowTooltips?: boolean;
 };