Do not focus the input on screen exit transition

[parasharrajat]

Details

Using event.data.closing property from transitionEnd event, we can prevent the focus handlers from firing at the page exit animation which will fix button jumping and flicking issues of Keyboard when going back on the native platforms.

Fixed Issues

$ #14843
PROPOSAL: #14843 (comment)

Tests

• Each platform.

1. Open the app.
2. Go to Settings page.
3. Open Add Secondory Login page, Add Paypal Payment method page, Change password page one by one.
4. Check that input is focused by default on opening the page.
5. Press Arrow icon from the top left, to go back.
6. Notice that there is a keyboard flickering on the opened page.
7. On the Add Paypal Payment method page, pressing the back arrow should not cause jumping to the Add payment method button.

• Verify that no errors appear in the JS console

Offline tests

Same as tests.

QA Steps

• Each platform.

1. Open the app.
2. Go to the Settings page.
3. Open the Add Secondary Login page and Change password page one by one.
4. Check that input is focused by default on opening the page.
5. Now open the Add Paypal Payment method page from Settings > Payments > Click Add Payment Method button.
6. Notice input is focused by default.
7. Press the hardware back button or back arrow from the top header, and notice that the Add Payment Method button does not jump.

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

screen-2023-02-11_00.55.51.mp4

Mobile Web - Chrome

screen-2023-02-11_01.04.59.mp4

Mobile Web - Safari

screen-2023-02-13_18.16.55.mp4

Desktop

screen-2023-02-13_18.13.57.mp4

iOS

screen-2023-02-13_18.10.53.mp4

Android

screen-2023-02-11_00.56.33.mp4

[MelvinBot]

@mountiny @mananjadhav One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[mananjadhav]

I've reviewed the PR and I'll have the code tested on all platforms.

[mountiny]

Looks good to me, just waiting for the checklist to be completed, thanks Manan!

[mananjadhav]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web-payment-button-flicker.mov

Mobile Web - Chrome

mweb-chrome-payment-button-flicker.mov

Mobile Web - Safari

mweb-safari-payment-button-flicker.mov

Desktop

desktop-payment-button-flicker.mov

iOS

ios-payment-button-flicker.mov

Android

android-payment-button-flicker.mov

---

Thanks for the patience here. This tests well. I can notice some flicker on Android emulator, but not on a physical device. So I am guessing it's just my emulator.

[mountiny]

Thanks everyone!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	722.753 ms → 731.304 ms (+8.551 ms, +1.2%)
App start runJsBundle	188.200 ms → 195.161 ms (+6.961 ms, +3.7%)
Open Search Page TTI	606.944 ms → 610.696 ms (+3.752 ms, +0.6%)
App start regularAppStart	0.014 ms → 0.017 ms (+0.002 ms, +17.5%) 🟡
App start nativeLaunch	21.548 ms → 21.233 ms (-0.315 ms, -1.5%)

Show details

Name	Duration
App start TTI	Baseline Mean: 722.753 ms Stdev: 28.693 ms (4.0%) Runs: 679.6583810001612 681.1844730000012 684.3924449998885 689.5693470002152 690.0618110001087 690.8119299998507 697.2975679999217 697.5726970001124 698.450782999862 703.5473009999841 704.2756880000234 707.0182759999298 708.6071250000969 709.386043000035 710.5894160000607 711.8937079999596 723.2963680000976 727.7608679998666 731.9012389997952 734.12253900012 737.8842730000615 741.0339130000211 741.1992979999632 743.058275999967 743.3232109998353 746.1836160002276 747.0319679998793 755.9024890000001 764.7415510001592 766.8802820001729 769.5907560000196 789.8659810000099 Current Mean: 731.304 ms Stdev: 22.164 ms (3.0%) Runs: 702.9798149997368 703.939705000259 704.1105639999732 707.8791770003736 708.6690090000629 709.5958259999752 713.2457429999486 714.3168439995497 716.8478659996763 717.041853999719 720.3454919997603 721.7570669995621 722.6989380000159 722.8265930004418 723.2682220004499 726.9050879999995 727.5418889997527 731.2609670003876 732.1083429995924 733.6361309997737 735.5822860002518 741.7237170003355 746.6316039999947 749.1776839997619 756.0379069996998 757.2453199997544 759.3570900000632 763.7601610003039 784.179438999854 784.4500540001318
App start runJsBundle	Baseline Mean: 188.200 ms Stdev: 10.458 ms (5.6%) Runs: 174 174 175 175 176 176 176 178 182 184 185 186 187 187 187 187 188 188 190 191 194 194 195 195 195 199 200 205 206 217 Current Mean: 195.161 ms Stdev: 11.990 ms (6.1%) Runs: 177 182 182 183 184 184 185 187 187 187 187 190 191 191 192 193 194 194 194 195 195 196 198 203 204 210 210 213 214 222 226
Open Search Page TTI	Baseline Mean: 606.944 ms Stdev: 14.830 ms (2.4%) Runs: 578.4685879996978 588.8902190001681 588.9507249994203 589.331706000492 590.1771649997681 591.8682050006464 592.0999360000715 592.1994230002165 593.5840659998357 597.9174809996039 598.6996259996668 601.0886639999226 605.5705160000362 605.8079019999132 606.9863689998165 607.234781999141 607.450154999271 607.8468430000357 608.9544680006802 609.3367110006511 611.6131190001033 613.2187910000794 614.9023029999807 616.1506360000931 616.4336749995127 623.02478000056 623.2176930001006 626.8896479997784 634.4077969994396 634.8557540001348 638.0965979993343 Current Mean: 610.696 ms Stdev: 16.582 ms (2.7%) Runs: 575.3736990001053 585.7482099998742 589.2781980000436 591.3840340003371 592.8752439999953 593.7822269992903 594.5076099997386 595.747192999348 596.9636229993775 602.7860519997776 603.8590090004727 606.8353270003572 607.4586999993771 607.8492029998451 609.3109539998695 609.8875740002841 610.212849999778 610.7515059998259 612.0924070002511 612.7229819996282 615.5584719991311 618.8135579992086 620.3472090000287 620.7142739994451 622.1233729999512 623.6484380001202 626.250447999686 627.1099040005356 627.7104080002755 637.6586509998888 645.7790540000424 647.1281739994884
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (6.6%) Runs: 0.012411000207066536 0.013021000195294619 0.013183000031858683 0.013224000111222267 0.013224000111222267 0.0133050000295043 0.0134680001065135 0.013508999720215797 0.013549999799579382 0.01358999963849783 0.013590000104159117 0.013672000262886286 0.01371300034224987 0.013753000181168318 0.013753999955952168 0.013875000178813934 0.013916000258177519 0.013955999631434679 0.01399700017645955 0.014038999564945698 0.014242000412195921 0.014282000251114368 0.014567000325769186 0.014606999699026346 0.01509599993005395 0.015217999927699566 0.01525900000706315 0.015381000004708767 0.015625 0.0157880000770092 0.015951000154018402 0.016234999988228083 Current Mean: 0.017 ms Stdev: 0.001 ms (5.3%) Runs: 0.015096000395715237 0.015543000772595406 0.01570700015872717 0.015828000381588936 0.015828000381588936 0.015868999995291233 0.015908999368548393 0.016032000072300434 0.016112999990582466 0.016195000149309635 0.016235999763011932 0.016276000067591667 0.016358000226318836 0.016438999213278294 0.016439000144600868 0.01647899951785803 0.016601000912487507 0.01664199959486723 0.0167239997535944 0.01680499967187643 0.01696799974888563 0.017333999276161194 0.0176189998164773 0.01766000036150217 0.017822999507188797 0.017985000275075436 0.018472999334335327 0.018717000260949135
App start nativeLaunch	Baseline Mean: 21.548 ms Stdev: 1.775 ms (8.2%) Runs: 19 19 19 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 23 23 23 24 24 25 25 26 Current Mean: 21.233 ms Stdev: 2.155 ms (10.2%) Runs: 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 22 22 22 23 24 25 25 25 28

[OSBotify]

🚀 Deployed to staging by https://github.com/mountiny in version: 1.2.73-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/francoisl in version: 1.2.73-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/francoisl in version: 1.2.73-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅