OptionsSelector - remove setNativeProps #11673

rushatgabhane · 2022-10-07T18:03:03Z

Details

This PR removes usage of setNativeProps from OptionsSelector and replaces it with

textInputRef.setSelectionRange(start, end) for web and desktop (see can i use for browser compatibility)
textInputRef.setSelection(start, end) for native

Fixed Issues

$ #11053

Tests

Tap + > New group
Search for a contact and select it
Verify that the search value is selected

Go to any workspace
Manage members -> Invite
Search for a contact and select it
Verify that the search value is selected

Tap + > Request money
Type a contact name fast
User should be able to type without issues.

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

QA Steps

Tap + > New group
Search for a contact and select it
Verify that the search gets cleared

Go to any workspace
Manage members -> Invite
Search for a contact and select it
Verify that the search gets cleared

Tap + > Request money
Type a contact name fast
User should be able to type without issues.

Verify that no errors appear in the JS console

Screenshots

Web

Screen.Recording.2022-10-11.at.11.22.04.PM.mov

Mobile Web - Chrome

Screen.Recording.2022-10-11.at.11.33.58.PM.mov

Mobile Web - Safari

Screen.Recording.2022-10-11.at.10.59.24.PM.mov

Desktop

Screen.Recording.2022-10-11.at.11.29.41.PM.mov

iOS

Screen.Recording.2022-10-11.at.10.56.37.PM.mov

Android

screen-20221011-233211.mp4

rushatgabhane · 2022-10-07T20:36:48Z

On mWeb, the keyboard closes after search is cleared :/
Unfortunately, it's present on production too. So I'm gonna do nothing about it in this PR.

Screen.Recording.2022-10-08.at.1.47.21.AM.mov

rushatgabhane · 2022-10-07T20:49:47Z

im not sure why @thesahindia was requested for a review

rushatgabhane · 2022-10-07T20:51:39Z

@luacmartins this is ready for review

thesahindia · 2022-10-07T20:53:52Z

im not sure why @thesahindia was requested for a review

Heheh, looks like melvin wants me here.

roryabraham · 2022-10-10T18:15:04Z

I think we should HOLD this until we investigate this recommendation

luacmartins · 2022-10-11T16:34:32Z

I agree with @roryabraham! @rushatgabhane it seems like you are already investigating that suggestion. Please keep us posted on any updates! Thanks for working on this!

luacmartins · 2022-10-11T16:51:49Z

@rushatgabhane did you mean to close this PR?

rushatgabhane · 2022-10-11T16:53:49Z

Sorry, It got auto closed when I merged with main because I didn't resolve merge conflicts

rushatgabhane · 2022-10-11T16:55:08Z

Will update soon

rushatgabhane · 2022-10-11T17:50:35Z

Holy shit, mWeb Safari is unusable. (Both for this PR and production)

Should we report this as a bug, and fix it later?
edit: Reported here https://expensify.slack.com/archives/C01GTK53T8Q/p1665512607209349

This PR

Screen.Recording.2022-10-11.at.10.59.24.PM.mov

Production

Screen.Recording.2022-10-11.at.11.18.39.PM.mov

rushatgabhane · 2022-10-11T18:09:08Z

@luacmartins this is ready for review, and checklist is complete.

roryabraham · 2022-10-11T18:17:30Z

Should we report this as a bug, and fix it later?

Sounds like a plan. Let's get this PR over the finish line.

rushatgabhane · 2022-10-11T18:26:41Z

cool, reported here.

roryabraham · 2022-10-11T22:57:32Z

@rushatgabhane can you please update the checklist to use that latest version from the PULL_REQUEST_TEMPLATE?

roryabraham

Web testing ✅

Screen.Recording.2022-10-11.at.4.03.19.PM.mov

iOS Safari testing ✅

Screen.Recording.2022-10-11.at.4.11.00.PM.mov

iOS testing ✅

Screen.Recording.2022-10-11.at.4.22.03.PM.mov

roryabraham · 2022-10-11T23:24:16Z

Uhhh, derp you've already reported that issue and it exists on production / is not caused by this PR

roryabraham · 2022-10-11T23:24:36Z

:oh_nothing: going to continue my review now...

roryabraham

Web testing ✅

Screen.Recording.2022-10-11.at.4.03.19.PM.mov

iOS Safari testing ✅

Screen.Recording.2022-10-11.at.4.11.00.PM.mov

iOS testing ✅

Screen.Recording.2022-10-11.at.4.22.03.PM.mov

Android testing ✅

Screen.Recording.2022-10-11.at.4.35.43.PM.mov

roryabraham

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 verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- 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 was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team 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 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.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

rushatgabhane · 2022-10-12T03:53:17Z

@roryabraham could you please trigger the checklist workflow?

luacmartins

LGTM! I did see the issues in mWeb, but we have another issue for that.

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 verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- 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 was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team 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 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.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Web

web.mov

Desktop

desktop.mov

Android

android.mov

Chrome

chrome.mov

iOS

ios.mov

Safari

safari.mov

melvin-bot · 2022-10-12T15:45:55Z

@luacmartins looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

luacmartins · 2022-10-12T15:47:00Z

Tests passed. Removing Emergency label.

OSBotify · 2022-10-12T15:50:35Z

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

OSBotify · 2022-10-13T06:57:11Z

🚀 Deployed to staging by @luacmartins in version: 1.2.14-0 🚀

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

…s-optionsSelector" This reverts commit 9b15fbc, reversing changes made to 84aca7d.

…ps-optionsSelector OptionsSelector - remove setNativeProps

OSBotify · 2022-10-13T21:48:48Z

🚀 Deployed to production by @yuwenmemon in version: 1.2.14-0 🚀

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

rushatgabhane changed the title ~~Rm set native props options selector~~ OptionsSelector - remove setNativeProps Oct 7, 2022

rushatgabhane mentioned this pull request Oct 7, 2022

[HOLD on #8503] : Reintroduce shouldFocusOnSelectRow in OptionsSelector after Fabric is enabled #11679

Closed

rushatgabhane marked this pull request as ready for review October 7, 2022 20:32

rushatgabhane requested a review from a team as a code owner October 7, 2022 20:32

melvin-bot bot requested review from roryabraham, luacmartins and thesahindia and removed request for a team October 7, 2022 20:32

rushatgabhane closed this Oct 11, 2022

rushatgabhane added 2 commits October 11, 2022 22:26

remove setNativeProp

b084be3

use platform specific setSelection

c72e02c

rushatgabhane reopened this Oct 11, 2022

rushatgabhane added 2 commits October 11, 2022 20:18

undo unnecessary podfile change

ef8bf9e

fix: eslint error

9bac7b2

handle textinput ref doesn't exist

b8cee28

roryabraham requested changes Oct 11, 2022

View reviewed changes

roryabraham reviewed Oct 11, 2022

View reviewed changes

roryabraham approved these changes Oct 11, 2022

View reviewed changes

luacmartins approved these changes Oct 12, 2022

View reviewed changes

luacmartins merged commit 9b15fbc into Expensify:main Oct 12, 2022

melvin-bot bot added the Emergency label Oct 12, 2022

luacmartins removed the Emergency label Oct 12, 2022

OSBotify mentioned this pull request Oct 13, 2022

Deploy Checklist: New Expensify 2022-10-13 #11793

Closed

9 tasks

kbecciv mentioned this pull request Oct 13, 2022

[HOLD for payment 2022-11-11] [$250] mWeb- Search -Focus and keyboard dismissed when start searching second user reported by @rushatgabhane #11801

Closed

neil-marcellini added a commit that referenced this pull request Oct 13, 2022

Revert "Merge pull request #11673 from rushatgabhane/rm-setNativeProp…

0823bd9

…s-optionsSelector" This reverts commit 9b15fbc, reversing changes made to 84aca7d.

kbecciv mentioned this pull request Oct 13, 2022

IOS - New Group - User is get highlighted only at the end of email (dot com) after search #11806

Closed

smrutiparida pushed a commit to autosave-app/App that referenced this pull request Oct 13, 2022

Merge pull request Expensify#11673 from rushatgabhane/rm-setNativePro…

23818bc

…ps-optionsSelector OptionsSelector - remove setNativeProps

rushatgabhane mentioned this pull request Oct 17, 2022

[HOLD for payment 2024-04-25] [Tracking] [Performance] Enable the new Fabric architecture #8503

Closed

38 tasks

mananjadhav mentioned this pull request Dec 13, 2022

[HOLD for payment 2022-12-09] [$1000] [Bug] mWeb - If you close the keyboard using native back button then it will keep reopening while selecting the contacts - reported by @thesahindia #11094

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OptionsSelector - remove setNativeProps #11673

OptionsSelector - remove setNativeProps #11673

rushatgabhane commented Oct 7, 2022 •

edited

rushatgabhane commented Oct 7, 2022

rushatgabhane commented Oct 7, 2022

rushatgabhane commented Oct 7, 2022

thesahindia commented Oct 7, 2022

roryabraham commented Oct 10, 2022

luacmartins commented Oct 11, 2022

luacmartins commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022 •

edited

rushatgabhane commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022 •

edited

rushatgabhane commented Oct 11, 2022 •

edited

roryabraham commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022

roryabraham commented Oct 11, 2022

roryabraham left a comment •

edited

roryabraham commented Oct 11, 2022

roryabraham commented Oct 11, 2022

roryabraham left a comment

roryabraham left a comment

rushatgabhane commented Oct 12, 2022 •

edited

luacmartins left a comment

melvin-bot bot commented Oct 12, 2022

luacmartins commented Oct 12, 2022

OSBotify commented Oct 12, 2022

OSBotify commented Oct 13, 2022

OSBotify commented Oct 13, 2022

OptionsSelector - remove setNativeProps #11673

OptionsSelector - remove setNativeProps #11673

Conversation

rushatgabhane commented Oct 7, 2022 • edited

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

rushatgabhane commented Oct 7, 2022

rushatgabhane commented Oct 7, 2022

rushatgabhane commented Oct 7, 2022

thesahindia commented Oct 7, 2022

roryabraham commented Oct 10, 2022

luacmartins commented Oct 11, 2022

luacmartins commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022 • edited

rushatgabhane commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022 • edited

This PR

Production

rushatgabhane commented Oct 11, 2022 • edited

roryabraham commented Oct 11, 2022

rushatgabhane commented Oct 11, 2022

roryabraham commented Oct 11, 2022

roryabraham left a comment • edited

Choose a reason for hiding this comment

Web testing ✅

iOS Safari testing ✅

iOS testing ✅

roryabraham commented Oct 11, 2022

roryabraham commented Oct 11, 2022

roryabraham left a comment

Choose a reason for hiding this comment

Web testing ✅

iOS Safari testing ✅

iOS testing ✅

Android testing ✅

roryabraham left a comment

Choose a reason for hiding this comment

rushatgabhane commented Oct 12, 2022 • edited

luacmartins left a comment

Choose a reason for hiding this comment

melvin-bot bot commented Oct 12, 2022

luacmartins commented Oct 12, 2022

OSBotify commented Oct 12, 2022

OSBotify commented Oct 13, 2022

OSBotify commented Oct 13, 2022

rushatgabhane commented Oct 7, 2022 •

edited

rushatgabhane commented Oct 11, 2022 •

edited

rushatgabhane commented Oct 11, 2022 •

edited

rushatgabhane commented Oct 11, 2022 •

edited

roryabraham left a comment •

edited

rushatgabhane commented Oct 12, 2022 •

edited