Set initialValue right after date picker is shown on iOS

[marcochavezf]

Details

Set the initialValue right after the date picker is shown. In this way, we don't set an undefined value when the Reset button is pressed. The crash only happens on iOS. On web, there's a Reset/Clear button, but it's defined by the browser (each browser has different behavior and we don't have access to that function).

Fixed Issues

$ #14417

Tests

1. Click on Settings > Workspaces > Click on an existing workspace (or create a new one) > Connect bank account
2. Connect manually
3. Go to the Company information step
4. For the incorporation date field enter any date and then click on Reset
5. Verify the Date picker resets to the latest entered date

• Verify that no errors appear in the JS console

Offline tests

N/A since this component doesn't require an internet connection

QA Steps

Same as test steps

• 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.Recording.2023-01-19.at.17.17.07.mov

Mobile Web - Chrome

Screen.Recording.2023-01-19.at.17.56.40.mov

Mobile Web - Safari

Screen.Recording.2023-01-19.at.17.40.24.mov

Desktop

Screen.Recording.2023-01-19.at.17.20.16.mov

iOS

Screen.Recording.2023-01-19.at.17.04.19.mov

Android

Screen.Recording.2023-01-19.at.17.14.34.mov

[melvin-bot]

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

[melvin-bot]

@thesahindia @neil-marcellini 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]

[thesahindia]

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

Screen.Recording.2023-01-20.at.9.37.39.AM.mov

Mobile Web - Chrome

Screen.Recording.2023-01-20.at.9.34.03.AM.mov

Mobile Web - Safari

Screen.Recording.2023-01-20.at.9.30.19.AM.mov

Desktop

Screen.Recording.2023-01-20.at.9.43.16.AM.mov

iOS

Screen.Recording.2023-01-20.at.9.26.32.AM.mov

Android

Screen.Recording.2023-01-20.at.10.03.47.AM.mov

[thesahindia]

Looks good and works well!

C+ reviewed 🎀👀🎀

cc: @neil-marcellini

[neil-marcellini]

Looks good, thanks.

[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	686.275 ms → 712.748 ms (+26.473 ms, +3.9%)
App start runJsBundle	183.969 ms → 192.133 ms (+8.165 ms, +4.4%)
App start regularAppStart	0.014 ms → 0.016 ms (+0.002 ms, +11.0%)
App start nativeLaunch	20.433 ms → 20.063 ms (-0.371 ms, -1.8%)
Open Search Page TTI	609.733 ms → 604.883 ms (-4.850 ms, -0.8%)

Show details

Name	Duration
App start TTI	Baseline Mean: 686.275 ms Stdev: 27.974 ms (4.1%) Runs: 644.5743419993669 644.8348469994962 645.0035330001265 645.4320379998535 653.8349070008844 663.2965590003878 663.4165359996259 664.2076299991459 664.7625370007008 664.9796990007162 665.4464180003852 670.3346309997141 670.3867579996586 672.6336000002921 682.1921270005405 686.3669649995863 688.6322220005095 694.5211989991367 695.4930339995772 696.0905530005693 698.2914349995553 700.0884160008281 700.6097250003368 703.1231100000441 704.0643419995904 709.3937519993633 712.0437320005149 721.2174019999802 721.3324239999056 724.5213380008936 734.8872449994087 754.7945019993931 Current Mean: 712.748 ms Stdev: 27.566 ms (3.9%) Runs: 667.1514630001038 669.6906899996102 670.7870339993387 680.9467760007828 683.862085999921 692.2634239997715 693.2852369993925 693.5084840003401 695.418572999537 696.150891000405 698.508470999077 701.4247169997543 703.4150350000709 703.4878560006618 705.1363539993763 708.422576000914 710.5644419994205 712.5005970001221 716.3963980004191 721.8990109991282 722.5838319994509 724.3730250000954 724.793741999194 728.4889359995723 733.2505220007151 734.1848469991237 747.1468119993806 748.1776429992169 762.5515919998288 767.5005120001733 777.3095709998161
App start runJsBundle	Baseline Mean: 183.969 ms Stdev: 14.825 ms (8.1%) Runs: 158 161 164 168 169 172 174 174 174 174 174 175 177 180 180 182 183 183 186 186 186 189 190 193 193 195 195 200 210 210 215 217 Current Mean: 192.133 ms Stdev: 13.276 ms (6.9%) Runs: 171 171 172 177 179 180 181 184 184 185 185 186 188 190 190 190 190 194 195 195 199 200 202 202 204 209 210 210 218 223
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (6.4%) Runs: 0.012491999194025993 0.012899000197649002 0.013020999729633331 0.013103000819683075 0.013387000188231468 0.013467999175190926 0.01355000026524067 0.013793999329209328 0.013794001191854477 0.013875000178813934 0.014078998938202858 0.0142000000923872 0.014281999319791794 0.01428299956023693 0.014444999396800995 0.014606999233365059 0.014688998460769653 0.014770999550819397 0.014810999855399132 0.014810999855399132 0.01489199884235859 0.01505499891936779 0.015137000009417534 0.015177998691797256 0.015257999300956726 0.015381000936031342 0.015542998909950256 0.015543999150395393 0.0157880000770092 0.016276000067591667 Current Mean: 0.016 ms Stdev: 0.001 ms (7.5%) Runs: 0.013753000646829605 0.0139979999512434 0.014567000791430473 0.014852000400424004 0.014892000705003738 0.014973999932408333 0.01505499891936779 0.015095999464392662 0.015137000009417534 0.015177000313997269 0.015258999541401863 0.015300000086426735 0.015380999073386192 0.015461999922990799 0.01550300046801567 0.015583999454975128 0.01574699953198433 0.016356999054551125 0.016357000917196274 0.016397999599575996 0.016439000144600868 0.016561001539230347 0.016641998663544655 0.016682999208569527 0.016846001148223877 0.016885999590158463 0.017211999744176865 0.0172520000487566 0.017781000584363937 0.017782000824809074 0.018472999334335327 0.018718000501394272
App start nativeLaunch	Baseline Mean: 20.433 ms Stdev: 1.820 ms (8.9%) Runs: 17 18 18 19 19 19 19 19 19 19 19 19 20 20 20 20 21 21 21 21 21 21 21 22 23 23 23 23 24 24 Current Mean: 20.063 ms Stdev: 1.819 ms (9.1%) Runs: 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 20 20 21 21 21 21 22 22 22 22 23 24 25
Open Search Page TTI	Baseline Mean: 609.733 ms Stdev: 18.304 ms (3.0%) Runs: 582.9695640001446 584.6357019990683 585.0866289995611 586.3740229997784 588.5031340010464 593.5720220003277 593.9516599997878 594.8644619993865 596.2043459992856 597.9942630007863 598.1070549990982 598.4231369998306 600.6475840006024 601.5233970005065 603.2489829994738 603.4611409995705 604.0028900001198 609.7543129995465 614.9087729994208 616.42948500067 619.2125659994781 619.6783449985087 620.5752370003611 622.2703859992325 625.5997320003808 626.1164960004389 628.2085770014673 630.4182530008256 632.0952149983495 634.847046000883 639.6647950001061 658.1110839992762 Current Mean: 604.883 ms Stdev: 14.477 ms (2.4%) Runs: 581.7918710000813 583.3416760005057 584.55033400096 584.9744880013168 586.7474769987166 588.7746590003371 589.734579000622 593.0393070001155 593.5008550006896 594.0946450009942 595.2278239987791 595.9080400001258 599.394043000415 599.621907999739 601.6007489990443 604.2841800004244 605.8667399995029 607.1898610014468 607.2519530002028 607.4869389999658 607.5583899989724 609.0991619993001 610.6416840013117 612.129313999787 617.4731450006366 617.5755209997296 621.1199139989913 623.003581000492 625.0437019988894 625.9515790008008 626.0200200006366 629.0013839993626 632.1350500006229

[OSBotify]

🚀 Deployed to staging by https://github.com/neil-marcellini in version: 1.2.58-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/chiragsalian in version: 1.2.58-4 🚀

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