Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix error message display bug on google signin #34863

Merged
merged 7 commits into from
Feb 5, 2024
Merged

Fix error message display bug on google signin #34863

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2ecaf16
fix error message display bug on google signin
FitseTLT Jan 16, 2024
ef7ee74
add comment
FitseTLT Jan 21, 2024
370e600
Merge branch 'main' into fix-google-signin-validate-error-bug
FitseTLT Jan 31, 2024
2493562
Merge branch 'main' into fix-google-signin-validate-error-bug
FitseTLT Feb 3, 2024
1bcc02e
update to validate on non-native only
FitseTLT Feb 3, 2024
4aa049a
Merge branch 'main' into fix-google-signin-validate-error-bug
FitseTLT Feb 5, 2024
944a29b
updated based on comments
FitseTLT Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 22 additions & 9 deletions src/pages/signin/LoginForm/BaseLoginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {parsePhoneNumber} from '@libs/PhoneNumber';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import Visibility from '@libs/Visibility';
import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
import * as CloseAccount from '@userActions/CloseAccount';
import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys';
import * as Session from '@userActions/Session';
Expand Down Expand Up @@ -91,6 +92,8 @@ const defaultProps = {
isInModal: false,
};

const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();

function LoginForm(props) {
const styles = useThemeStyles();
const input = useRef();
Expand Down Expand Up @@ -277,13 +280,23 @@ function LoginForm(props) {
id="username"
name="username"
testID="username"
onBlur={() => {
if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) {
return;
}
firstBlurred.current = true;
validate(login);
}}
onBlur={
// As we have only two signin buttons (Apple/Google) other than the text input,
// for natives onBlur is called only when the buttons are pressed and we don't need
// to validate in those case as the user has opted for other signin flow.
willBlurTextInputOnTapOutside
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✋ Coming from #42054

willBlurTextInputOnTapOutside is always false on native, leading to a bug in which the input is not validating when tapping away.

? () =>
// This delay is to avoid the validate being called before google iframe is rendered to
// avoid error message appearing after pressing google signin button.
setTimeout(() => {
if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) {
return;
}
firstBlurred.current = true;
validate(login);
}, 500)
: undefined
}
onChangeText={onTextInput}
onSubmitEditing={validateAndSubmitForm}
autoCapitalize="none"
Expand Down Expand Up @@ -333,10 +346,10 @@ function LoginForm(props) {
</Text>

<View style={props.isSmallScreenWidth ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
<View onMouseDown={(e) => e.preventDefault()}>
<View>
<AppleSignIn />
</View>
<View onMouseDown={(e) => e.preventDefault()}>
<View>
<GoogleSignIn />
</View>
</View>
Expand Down
Loading