izarutskaya commented 11 months ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.4.14-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause-Internal Team Slack conversation: @

Action Performed:

Open the native app on iOS
Type email/phone in the login input field
Observe the flickering above the keyboard [if the flickering does not happen, background the app and reopen it]

Expected Result:

No visual issue/flickering when typing in the login field

Actual Result:

Visual flickering happen while typing the email/phone

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

[ ] Android: Native
[ ] Android: mWeb Chrome
[x] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Bug6320389_1703024913225!Screen_Shot_2023-12-20_at_1 28 00_AM

https://github.com/Expensify/App/assets/115492554/1e4ca0ac-65b1-4665-b7c9-08308527cf04

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0190fa15c0c22e9427
Upwork Job ID: 1737420927155322880
Last Price Increase: 2024-01-03

melvin-bot[bot] commented 11 months ago

Job added to Upwork: https://www.upwork.com/jobs/~0190fa15c0c22e9427

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot[bot] commented 11 months ago

Bug0 Triage Checklist (Main S/O)

[ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
[ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
[ ] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
[ ] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
[ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

ikevin127 commented 11 months ago

Proposal

Please re-state the problem that we are trying to solve in this issue

Visual flickering of the keyboard is occuring while typing in the Phone or email field.

What is the root cause of that problem?

As per https://github.com/facebook/react-native/issues/39411#issuecomment-1726601414

It appears to be that at some point recently (pre iOS 17) a bug was introduced. Whenever secureTextEntry={false} and textContentType is set, various Text Input changes (typing, focus, etc...) will fire a native keyboardWillChangeFrame event that causes the keyboard to re-render.

More context

1. As per https://github.com/facebook/react-native/issues/39411#issuecomment-1744955770 > I believe this is caused by the "Passwords"-thing (see attached image) that appears on iOS when the OS believes you want to use a password from your keychain. > When I test on a phone that does not have a keychain, there is no jumping or flickering. -> According to RN documentation https://reactnative.dev/docs/textinput#textcontenttype-ios > You can set textContentType to username or password to enable autofill of login details from the device keychain. This confirms that the issue happens due to the OS - keyboard - input context by currently having the `textContentType` prop set to `username` which shows the keychain bar above the keyboard which re-renders when various input changes (typing, focus, etc...) occur. 2. As per https://github.com/facebook/react-native/issues/39411#issuecomment-1744962420 > I can confirm that it is an issue with the Passwords option in the Keyboard toolbar. Seems to be an issue across iOS 17 rather than a ReactNative issue. (It also isn't fixed in iOS 17.1, so we may be waiting a while for a fix). > Closing as it isn't a React Native-specific issue. Confirms that it is an OS specific issue that came to be with iOS 17.x version.

What changes do you think we should make in order to solve the problem?

Change the BaseLoginForm.js components iOS only textContentType prop to emailAddress.

What alternative solutions did you explore? (Optional)

Change the textContentType prop to none. This would not give the keyboard and the system any information about the expected semantic meaning for the content that the user enters into the text input.

Videos

iOS: Native

https://github.com/Expensify/App/assets/56457735/e160f684-6855-44b9-b117-d1e816a6c290

kameshwarnayak commented 11 months ago

I am not able to recreate this in the current main. I am using a simulator to test this. Should I test this GH issue on any particular iOS version?

zanyrenney commented 11 months ago

I also can't reproduce this.

zanyrenney commented 11 months ago

https://github.com/Expensify/App/assets/56830058/b9d48421-cece-4988-ab58-fb3fbe8977cd

closing as can't be reproduced.

kbecciv commented 11 months ago

Issue is reproduced on build 1.4.17.1

https://github.com/Expensify/App/assets/93399543/e83a41e6-ed07-49a6-afbe-a82f0f6f6a89

melvin-bot[bot] commented 11 months ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

fedirjh commented 11 months ago

As per https://github.com/facebook/react-native/issues/39411#issuecomment-1744962420 , this seems like a bug with IOS not react-native and the issue seems to be closed on RN :

I can confirm that it is an issue with the Passwords option in the Keyboard toolbar. Seems to be an issue across iOS 17 rather than a ReactNative issue. (It also isn't fixed in iOS 17.1, so we may be waiting a while for a fix).

Closing as it isn't a React Native-specific issue.

melvin-bot[bot] commented 11 months ago

@fedirjh, @zanyrenney Eep! 4 days overdue now. Issues have feelings too...

mvtglobally commented 11 months ago

Issue not reproducible during KI retests. (First week)

melvin-bot[bot] commented 11 months ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

melvin-bot[bot] commented 11 months ago

@fedirjh @zanyrenney this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

fedirjh commented 11 months ago

cc @zanyrenney I think this can be closed, please check my comment: https://github.com/Expensify/App/issues/33338#issuecomment-1870841706

zanyrenney commented 11 months ago

Thanks @fedirjh I agree. Closing!

fahadjaved1994 commented 10 months ago

Greetings,

I encountered a similar issue with my client app, attributing it to iOS 17.1. However, I have successfully addressed the flickering problem in React Native. To provide clarity, I have attached a video demonstrating the issue and its subsequent resolution.

Should you require further details or assistance, please do not hesitate to reach out.

Flickering issue: https://github.com/Expensify/App/assets/34941166/cd3dbe30-7bbd-4f87-9e10-af6ccaec5fe2 Flickering fixed: https://github.com/Expensify/App/assets/34941166/b9156a24-6824-444b-810f-d7fdf245dd76

Contributor details Your Expensify account email: fahadjaved1994@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01bd0ed2c5cd6a64ed

melvin-bot[bot] commented 10 months ago

📣 @fahadjaved1994! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:
```
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
```

Expensify / App

[$500] iOS - Login - Visual flickering above the OS keyboard when typing in the login field #33338

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Videos