Skip to content

Login keyboard is not consistent in apps and browsers #29699

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

Merged
MonilBhavsar merged 7 commits into from
Oct 20, 2023
Merged

Login keyboard is not consistent in apps and browsers #29699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f342ea0
Fix bug with keyboard is not consistent in safari
ZhenjaHorbach Oct 16, 2023
fe63fc9
Update login file using formatter
ZhenjaHorbach Oct 16, 2023
0abf5f5
Update text button
ZhenjaHorbach Oct 16, 2023
bd3e4f4
Add condition for returnKeyType
ZhenjaHorbach Oct 18, 2023
43eb00d
Add getReturnKeyType function
ZhenjaHorbach Oct 18, 2023
585e890
Revert changes
ZhenjaHorbach Oct 19, 2023
63218c9
Update returnKeyType for PDFPasswordForm
ZhenjaHorbach Oct 20, 2023
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
2 changes: 1 addition & 1 deletion src/components/PDFView/PDFPasswordForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
autoCorrect={false}
textContentType="password"
onChangeText={updatePassword}
returnKeyType="done"
returnKeyType="go"
onSubmitEditing={submitPassword}
errorText={errorText}
onFocus={() => onPasswordFieldFocused(true)}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/settings/Profile/Contacts/NewContactMethodPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function NewContactMethodPage(props) {
ref={(el) => (loginInputRef.current = el)}
inputID="phoneOrEmail"
autoCapitalize="none"
returnKeyType="done"
returnKeyType="go"
maxLength={CONST.LOGIN_CHARACTER_LIMIT}
/>
</View>
Expand Down
1 change: 1 addition & 0 deletions src/pages/signin/LoginForm/BaseLoginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ function LoginForm(props) {
accessibilityLabel={translate('loginForm.phoneOrEmail')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
value={login}
returnKeyType="go"

@MonilBhavsar MonilBhavsar Oct 17, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks like we're using "done" in PDFPasswordForm and NewContactMethod page. So may be we use "done" for consistency?

@ZhenjaHorbach ZhenjaHorbach Oct 18, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Done )
The only thing, since the confirmation icon on Android browser is tied to keyboardType, I added the condition that the Android application had the same icon as in the Android browser

In the case of iOS the text will be 'done'

cc: @Ollyws

@MonilBhavsar MonilBhavsar Oct 18, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is platform specific key required. I see for other pages we have simple static value as 'done'

@ZhenjaHorbach ZhenjaHorbach Oct 18, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

In those places where we use only 'done' the same problem )

Screenshot 2023-10-18 at 08 44 44 Screenshot 2023-10-18 at 08 43 16

@MonilBhavsar MonilBhavsar Oct 18, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

So android does not support 'done'?
And can we please fix these places too as it does seem like an exact issue

@Ollyws Ollyws Oct 18, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The simpler option to keep consistency while avoiding using platform specific code would be to use returnKeyType="go" by default on every instance, instead of done.
Ofcourse on iOS that means the enter key would read go instead of done but either seems appropriate to me.
Any thoughts on this approach @MonilBhavsar ?

@MonilBhavsar MonilBhavsar Oct 18, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Okay, I am with that that as far it is consistent on all platforms. @Expensify/design could you please share your thought, if we're okay using go as return key on keyboard

For example:

275814972-c2147ee7-0b16-40d7-9d1a-0512646f4cb0

@ZhenjaHorbach ZhenjaHorbach Oct 19, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@shawnborton
@dannymcclain

Hello )
Can you share your thoughts, please ?)

@shawnborton shawnborton Oct 19, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

also cc @dubielzyk-expensify

But yeah, having "go" here makes sense to me.

@MonilBhavsar MonilBhavsar Oct 20, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thank you! Let's use go 👍

autoCompleteType="username"
textContentType="username"
nativeID="username"
Expand Down