Add shouldDelayFocus for RoomNameInput

[daraksha-dk]

Details

#15111 (comment)

Fixed Issues

$ #15111
PROPOSAL: #15111 (comment)

Tests

1. Open the App
2. Login with applause account
3. Click on FAB button -> New Room
4. Verify that Keyboard automatically opens for new room

• Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

1. Open the App
2. Login with applause account
3. Click on FAB button -> New Room
4. Verify that Keyboard automatically opens for new room

• 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-02-16.at.11.36.32.AM.mov

Mobile Web - Chrome

Screen.Recording.2023-02-16.at.11.40.05.AM.mov

Mobile Web - Safari

Screen.Recording.2023-02-16.at.11.44.46.AM.mov

Desktop

Screen.Recording.2023-02-16.at.11.50.50.AM.mov

iOS

Screen.Recording.2023-02-16.at.11.40.43.AM.mov

Android

Screen.Recording.2023-02-16.at.11.49.28.AM.mov

[MelvinBot]

@francoisl @sobitneupane 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]

[sobitneupane]

@daraksha-dk Why are we not directly importing shouldDelayFocus in RoomNameInput rather than passing it as a prop? Is there any reason?

[daraksha-dk]

@daraksha-dk Why are we not directly importing shouldDelayFocus in RoomNameInput rather than passing it as a prop? Is there any reason?

I passed it as a prop because we are doing the same for autoFocus and it was only needed when autoFocus is being used.
We aren't using autoFocus at the other instance

App/src/pages/ReportSettingsPage.js

Lines 175 to 178 in f839c56

	<RoomNameInput
	inputID="newRoomName"
	defaultValue={this.props.report.reportName}
	/>

[sobitneupane]

Screenshots/Videos

Android

Screen.Recording.2023-02-16.at.16.11.37.mov

Web

Screen.Recording.2023-02-16.at.15.54.48.mov

Mobile Web - Chrome

Screen.Recording.2023-02-16.at.16.03.07.mov

Mobile Web - Safari

Screen.Recording.2023-02-16.at.16.05.38.mov

Desktop

Screen.Recording.2023-02-16.at.16.01.00.mov

iOS

Screen.Recording.2023-02-16.at.16.04.11.mov

[sobitneupane]

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.

[francoisl]

I believe the Jest test failure was fixed yesterday, do you mind pulling main into the branch and pushing again @daraksha-dk? Just so we can have all the tests passing. Thanks!

[daraksha-dk]

@francoisl PR updated & all tests are passing now.

[francoisl]

Thanks!

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	692.125 ms → 711.106 ms (+18.981 ms, +2.7%)
App start runJsBundle	191.813 ms → 197.094 ms (+5.281 ms, +2.8%)
App start regularAppStart	0.016 ms → 0.022 ms (+0.006 ms, +38.1%) 🟡
App start nativeLaunch	19.517 ms → 19.500 ms (-0.017 ms, ±0.0%)
Open Search Page TTI	610.096 ms → 609.386 ms (-0.710 ms, ±0.0%)

Show details

Name	Duration
App start TTI	Baseline Mean: 692.125 ms Stdev: 31.887 ms (4.6%) Runs: 636.7616269998252 641.265345999971 642.0556509997696 648.7499850001186 653.5126099996269 656.7615700000897 664.8397129997611 666.2947589997202 666.4178020004183 670.3331939997151 671.6075860001147 671.660055000335 679.5127860000357 686.1086210003123 687.3805369995534 693.0110950004309 695.2546330001205 697.6087769996375 704.5145030003041 705.3933560000733 708.6753409998491 710.4120159996673 712.5056079998612 712.9337069997564 714.3100560000166 724.9345599999651 725.9604190001264 731.5936439996585 731.7249699998647 744.7971409996971 745.2401000000536 745.8758880002424 Current Mean: 711.106 ms Stdev: 31.976 ms (4.5%) Runs: 661.5666060000658 666.8756280001253 668.8930409997702 674.1227550003678 678.7856499999762 679.4665780002251 679.6287770001218 683.5010439995676 686.3492339998484 687.5814089998603 689.4871720001101 691.4478169996291 695.3006509998813 699.8528209999204 700.1666740002111 702.3165370002389 706.8369530001655 709.9575589997694 712.7060030000284 715.1743350001052 715.8811389999464 728.6139120003209 731.1471379995346 735.4253280004486 743.3934840001166 748.9698120001704 749.0894489996135 752.1994049996138 756.8208779999986 766.2703179996461 766.5370279997587 771.0400799997151
App start runJsBundle	Baseline Mean: 191.813 ms Stdev: 23.487 ms (12.2%) Runs: 159 160 163 163 164 170 171 171 173 174 176 176 180 181 181 182 187 189 194 196 204 209 209 212 215 218 219 219 221 231 231 240 Current Mean: 197.094 ms Stdev: 24.726 ms (12.5%) Runs: 170 171 173 173 173 174 176 178 178 179 179 179 181 181 182 183 190 191 193 197 198 207 213 215 218 224 224 227 242 243 245 250
App start regularAppStart	Baseline Mean: 0.016 ms Stdev: 0.001 ms (7.2%) Runs: 0.014120000414550304 0.014161000028252602 0.014241999946534634 0.014607999473810196 0.014649000018835068 0.014770999550819397 0.0148930000141263 0.015137000009417534 0.015137000009417534 0.015177000313997269 0.015339999459683895 0.015381000004708767 0.015462000854313374 0.015543000772595406 0.015705999918282032 0.015828000381588936 0.015949999913573265 0.016032000072300434 0.016154000535607338 0.016154000535607338 0.016276000067591667 0.016439000144600868 0.01647899951785803 0.0165200000628829 0.01660200022161007 0.016642000526189804 0.017008000053465366 0.017130999825894833 0.01827000081539154 0.018391999416053295 0.01843199972063303 Current Mean: 0.022 ms Stdev: 0.002 ms (7.5%) Runs: 0.019287999719381332 0.01969399955123663 0.01977499946951866 0.019979000091552734 0.019979000091552734 0.020100999623537064 0.020262999460101128 0.02042700070887804 0.02075199969112873 0.020915000699460506 0.02099600061774254 0.021321000531315804 0.021362999454140663 0.021443000063300133 0.02144400030374527 0.021769000217318535 0.021809999831020832 0.021850000135600567 0.02217600028961897 0.022216999903321266 0.022664000280201435 0.022744999267160892 0.02278600074350834 0.02282699942588806 0.023153000511229038 0.0233559999614954 0.023357000201940536 0.024007000029087067 0.0240879999473691 0.024821000173687935 0.02522800024598837 0.025635000318288803
App start nativeLaunch	Baseline Mean: 19.517 ms Stdev: 1.193 ms (6.1%) Runs: 17 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 21 21 21 21 22 22 Current Mean: 19.500 ms Stdev: 1.025 ms (5.3%) Runs: 18 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 20 21 21 21 21 22
Open Search Page TTI	Baseline Mean: 610.096 ms Stdev: 20.788 ms (3.4%) Runs: 578.7587899994105 581.4067799998447 586.0935460003093 587.9931640001014 591.2543140007183 591.437826000154 593.5450029997155 593.8804940003902 596.618978000246 597.0835370002314 597.9702150002122 598.2062579998747 598.3526209993288 600.6298009995371 603.1274410001934 604.621012000367 606.9496659999713 609.2890630001202 611.2487390004098 611.5391040006652 614.2485349997878 614.3473309995607 615.9736740002409 623.0874839993194 623.2153730001301 631.2318120002747 632.487914999947 633.9760750001296 634.441244000569 639.6629639994353 647.1111249998212 673.2857260005549 Current Mean: 609.386 ms Stdev: 15.463 ms (2.5%) Runs: 583.8194579994306 586.9741620002314 588.9675300000235 590.5056560002267 590.7984210001305 594.1144619993865 594.7108970005065 598.1488439999521 598.2646890003234 601.0278320005164 602.2831220002845 602.3057450000197 603.756226000376 605.1211350001395 608.1263030003756 608.8955889996141 610.4360360000283 611.3273520004004 611.5434980001301 612.0378419999033 612.5144450003281 615.2486979998648 615.4417730001733 620.5404869997874 624.4195960005745 625.5403249999508 627.7322189994156 629.1678059995174 630.2616790002212 640.196981000714 646.7308759996668

[OSBotify]

🚀 Deployed to staging by https://github.com/francoisl 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 ✅