From 2477045225a704607379d3f98c4f7b9e68a819fe Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 1 Nov 2023 18:32:36 +0700 Subject: [PATCH 1/2] fix: Start Chat - Invalid red dot briefly appears by closing 'room' tab when there's no prior action --- src/CONST.ts | 9 +++++++++ src/components/Form.js | 8 ++++++++ src/components/Form/FormProvider.js | 5 +++++ src/components/HeaderWithBackButton/index.js | 1 + src/components/RoomNameInput/index.js | 2 +- src/components/RoomNameInput/index.native.js | 2 +- src/libs/Navigation/AppNavigator/Navigators/Overlay.js | 2 ++ 7 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 155e50a35cde..fbdf75514325 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2809,6 +2809,15 @@ const CONST = { * The count of characters we'll allow the user to type after reaching SEARCH_MAX_LENGTH in an input. */ 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', } as const; export default CONST; diff --git a/src/components/Form.js b/src/components/Form.js index 4d3acf754715..0e109f092ec4 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -353,6 +353,14 @@ function Form(props) { // the user are focusing a TextInput and proceeds to toggle a CheckBox in // web and mobile web platforms. setTimeout(() => { + const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); + console.log('duke event ', event); + 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); diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 85408323c9f2..3255bbbad6ef 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -281,6 +281,11 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC // the user is focusing a TextInput and proceeds to toggle a CheckBox in // web and mobile web platforms. setTimeout(() => { + const relatedTargetId = lodashGet(event, 'nativeEvent.relatedTarget.id'); + console.warn('duke native event', event); + 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); diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index 67e8790560dc..4a03dce10001 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -78,6 +78,7 @@ function HeaderWithBackButton({ style={[styles.touchableButtonImage]} accessibilityRole="button" accessibilityLabel={translate('common.back')} + nativeID={CONST.BACK_BUTTON_NATIVE_ID} > 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} diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js index d9b592b1537d..19a9c6fdb938 100644 --- a/src/components/RoomNameInput/index.native.js +++ b/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} diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js index a36f98076d22..f256cd41a002 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.js +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.js @@ -28,6 +28,7 @@ function Overlay(props) { onPress={props.onPress} accessibilityLabel={translate('common.close')} accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + nativeID={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID} /> From 4d112cf874f795f45a910c01559100eb5fa97873 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 17 Nov 2023 22:38:06 +0700 Subject: [PATCH 2/2] merge main --- src/CONST.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 1c72c0a9156a..55beabb8e85e 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2887,7 +2887,7 @@ const CONST = { TOP_BUTTON_NATIVE_ID: 'overLayTopButton', BOTTOM_BUTTON_NATIVE_ID: 'overLayBottomButton', }, - + BACK_BUTTON_NATIVE_ID: 'backButton', REFERRAL_PROGRAM: { CONTENT_TYPES: {