Merge pull request #30679 from dukenv0307/fix/30618

fix: Start Chat - Invalid red dot briefly appears by closing 'room' tab when there's no prior action

Author: Julesssss

src/CONST.ts

@@ -2880,6 +2880,15 @@ const CONST = {
      */
     ADDITIONAL_ALLOWED_CHARACTERS: 20,
 
+    /**
+     * native IDs for close buttons in Overlay component
+     */
+    OVERLAY: {
+        TOP_BUTTON_NATIVE_ID: 'overLayTopButton',
+        BOTTOM_BUTTON_NATIVE_ID: 'overLayBottomButton',
+    },
+
+    BACK_BUTTON_NATIVE_ID: 'backButton',
     REFERRAL_PROGRAM: {
         CONTENT_TYPES: {
             MONEY_REQUEST: 'request',

src/components/Form.js

@@ -351,7 +351,17 @@ function Form(props) {
                             // We delay the validation in order to prevent Checkbox loss of focus when
                             // the user are focusing a TextInput and proceeds to toggle a CheckBox in
                             // web and mobile web platforms.
+
+                            // Prevents React from resetting its properties
+                            event.persist();
                             setTimeout(() => {
+                                const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+                                if (
+                                    relatedTargetId &&
+                                    _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)
+                                ) {
+                                    return;
+                                }
                                 setTouchedInput(inputID);
                                 if (props.shouldValidateOnBlur) {
                                     onValidate(inputValues, !hasServerError);

src/components/Form/FormProvider.js

@@ -266,7 +266,14 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         // We delay the validation in order to prevent Checkbox loss of focus when
                         // the user is focusing a TextInput and proceeds to toggle a CheckBox in
                         // web and mobile web platforms.
+
+                        // Prevents React from resetting its properties
+                        event.persist();
                         setTimeout(() => {
+                            const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id');
+                            if (relatedTargetId && _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)) {
+                                return;
+                            }
                             setTouchedInput(inputID);
                             if (shouldValidateOnBlur) {
                                 onValidate(inputValues, !hasServerError);

src/components/HeaderWithBackButton/index.js

@@ -79,6 +79,7 @@ function HeaderWithBackButton({
                             style={[styles.touchableButtonImage]}
                             role="button"
                             accessibilityLabel={translate('common.back')}
+                            nativeID={CONST.BACK_BUTTON_NATIVE_ID}
                         >
                             <Icon
                                 src={Expensicons.BackArrow}

src/components/RoomNameInput/index.js

@@ -57,7 +57,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
             autoCapitalize="none"
-            onBlur={() => isFocused && onBlur()}
+            onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}

src/components/RoomNameInput/index.native.js

@@ -41,7 +41,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             errorText={errorText}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
-            onBlur={() => isFocused && onBlur()}
+            onBlur={(event) => isFocused && onBlur(event)}
             autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}

src/libs/Navigation/AppNavigator/Navigators/Overlay.js

@@ -29,13 +29,15 @@ function Overlay(props) {
                     onPress={props.onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    nativeID={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
                 />
                 <PressableWithoutFeedback
                     style={[styles.flex1]}
                     onPress={props.onPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     noDragArea
+                    nativeID={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
                 />
             </View>
         </Animated.View>