Android-Emoji is selected only on second tap #8221

mollfpr · 2022-03-18T03:46:10Z

Details

The issue is happen because the keyboard is still visible after the modal show, show the first press is for dismissing the keyboard then the second press is for selecting emoji.

Fixed Issues

$ #8110

Tests

Launch the app
Log in with account and select user
On Input box - tap on emoji icon
Tap on any emojis
Verified that only need 1 tap to select a emoji

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Launch the app
Log in with account and select user
On Input box - tap on emoji icon
Tap on any emojis
Verified that only need 1 tap to select a emoji

Verify that no errors appear in the JS console

Screenshots

Web

Screen.Recording.2022-03-24.at.01.18.32.mov

mWeb

Screen.Recording.2022-03-24.at.01.28.13.mov

Desktop

Screen.Recording.2022-03-24.at.01.19.04.mov

iOS

Screen.Recording.2022-03-24.at.01.25.37.mov

Android

Screen.Recording.2022-03-24.at.01.41.40.mov

mollfpr · 2022-03-19T09:48:11Z

Screen.Recording.2022-03-19.at.10.24.49.mov

src/components/EmojiPicker/index.js

Santhosh-Sellavel · 2022-03-22T19:56:39Z

@mollfpr

Seem there is been some changes after the PR is created. Can you retest on all platforms and update new recordings.

Also, I tested Android:
After selecting an emoji, the keyboard is not opening in android even after the focus is set to input. iOS Works fine.

Screen_Recording_20220323-011034_New.Expensify.mp4

cc: @tgolen

Santhosh-Sellavel · 2022-03-23T15:47:36Z

@tgolen @mollfpr
Sorry for the confusion here.

After selecting an emoji, the keyboard is not opening in android even after the focus is set to input. iOS Works fine.

This issue exists even in the staging build. So will report it as a separate bug as it is not caused by this PR.

mollfpr · 2022-03-23T18:44:09Z

@tgolen @Santhosh-Sellavel update test on all platforms

Web

Screen.Recording.2022-03-24.at.01.18.32.mov

mWeb

Screen.Recording.2022-03-24.at.01.28.13.mov

Desktop

Screen.Recording.2022-03-24.at.01.19.04.mov

iOS

Screen.Recording.2022-03-24.at.01.25.37.mov

Android

Screen.Recording.2022-03-24.at.01.41.40.mov

Santhosh-Sellavel · 2022-03-28T18:25:52Z

PR Reviewer Checklist

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
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 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 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 */
- Any functional components have the displayName property
- 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.

Santhosh-Sellavel · 2022-03-28T18:30:29Z

src/components/EmojiPicker/index.js

+            return;
+        }
+
+        // Dismiss the Keyboard and focus to prevent emoji press twice when selecting an emoji


Comment could be better,

// Dismiss the keyboard to provide a focus for the emoji picker to avoid selection issues. // Eg: https://github.com/Expensify/App/issues/8110

cc: @tgolen

Sorry, I don't like this change. If we had a policy of a code comment referencing the GH for each issue that was fixed in the code, then the code will be littered with thousands of them. It's easy to find the associated GH for a change using "blame" to find the PR that introduced the code.

Can you please remove the GH link from the comment?

Thanks for your comment, @tgolen. I'm not sure, that's why I put up a cc: for you on this.

@mollfpr Sorry for the back and forth, remove the link & let us know.

mollfpr · 2022-03-30T02:23:58Z

Remove link from comment!

cc @tgolen @Santhosh-Sellavel

Santhosh-Sellavel

LGTM! cc: @tgolen

OSBotify · 2022-03-30T14:52:34Z

✋ 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-03-30T20:48:45Z

🚀 Deployed to staging by @tgolen in version: 1.1.47-0 🚀

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

OSBotify · 2022-04-05T17:30:51Z

🚀 Deployed to production by @roryabraham in version: 1.1.49-1 🚀

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

mollfpr added 2 commits March 18, 2022 10:19

Android-Emoji is selected only on second tap

c041d81

using the right compose function

135dc22

mollfpr requested a review from a team as a code owner March 18, 2022 03:46

new approaches

8744040

AndrewGable requested review from a team and removed request for a team March 21, 2022 22:27

melvin-bot bot requested review from Santhosh-Sellavel and tgolen and removed request for a team March 21, 2022 22:27

tgolen requested changes Mar 22, 2022

View reviewed changes

src/components/EmojiPicker/index.js Outdated Show resolved Hide resolved

src/components/EmojiPicker/index.js Outdated Show resolved Hide resolved

mollfpr added 2 commits March 23, 2022 00:34

add early return and fix comment style

ce6cc22

Merge branch 'main' of https://github.com/mollfpr/App into fix-8110

8f07d97

mollfpr requested a review from tgolen March 22, 2022 17:35

Merge branch 'main' of https://github.com/mollfpr/App into fix-8110

f0b7109

tgolen previously approved these changes Mar 28, 2022

View reviewed changes

Santhosh-Sellavel suggested changes Mar 28, 2022

View reviewed changes

make comments more clear

be94ef4

mollfpr dismissed tgolen’s stale review via be94ef4 March 29, 2022 02:06

mollfpr requested review from Santhosh-Sellavel and tgolen March 29, 2022 02:06

remove link from comment

ba776b9

Santhosh-Sellavel approved these changes Mar 30, 2022

View reviewed changes

tgolen approved these changes Mar 30, 2022

View reviewed changes

tgolen merged commit 68ba8aa into Expensify:main Mar 30, 2022

OSBotify mentioned this pull request Mar 30, 2022

Deploy Checklist: New Expensify 2022-03-30 #8378

Closed

47 tasks

botify mentioned this pull request Apr 5, 2022

[HOLD for payment 2022-04-12] [$250] Android - Emoji- Emoji is selected only on second tap #8110

Closed

situchan mentioned this pull request Aug 16, 2023

Reapply onyx upgrade use cache with fixes #24041

Merged

62 tasks

DrLoopFall mentioned this pull request Aug 17, 2023

[HOLD for payment 2023-09-13] [$1000] Emoji - When scrolling with the down arrows, the emoji selection disappears #24471

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Android-Emoji is selected only on second tap #8221

Android-Emoji is selected only on second tap #8221

Uh oh!

mollfpr commented Mar 18, 2022 •

edited

Loading

Uh oh!

mollfpr commented Mar 19, 2022

Uh oh!

Uh oh!

Uh oh!

Santhosh-Sellavel commented Mar 22, 2022

Uh oh!

Santhosh-Sellavel commented Mar 23, 2022 •

edited

Loading

Uh oh!

mollfpr commented Mar 23, 2022

Uh oh!

Santhosh-Sellavel commented Mar 28, 2022 •

edited

Loading

Uh oh!

Santhosh-Sellavel Mar 28, 2022

Uh oh!

tgolen Mar 29, 2022

Uh oh!

Santhosh-Sellavel Mar 29, 2022

Uh oh!

mollfpr commented Mar 30, 2022

Uh oh!

Santhosh-Sellavel left a comment •

edited

Loading

Uh oh!

OSBotify commented Mar 30, 2022

Uh oh!

OSBotify commented Mar 30, 2022

Uh oh!

OSBotify commented Apr 5, 2022

Uh oh!

Uh oh!

Android-Emoji is selected only on second tap #8221

Android-Emoji is selected only on second tap #8221

Uh oh!

Conversation

mollfpr commented Mar 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

mWeb

Desktop

iOS

Android

Uh oh!

mollfpr commented Mar 19, 2022

Uh oh!

Uh oh!

Uh oh!

Santhosh-Sellavel commented Mar 22, 2022

Uh oh!

Santhosh-Sellavel commented Mar 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mollfpr commented Mar 23, 2022

Web

mWeb

Desktop

iOS

Android

Uh oh!

Santhosh-Sellavel commented Mar 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Checklist

Uh oh!

Santhosh-Sellavel Mar 28, 2022

Choose a reason for hiding this comment

Uh oh!

tgolen Mar 29, 2022

Choose a reason for hiding this comment

Uh oh!

Santhosh-Sellavel Mar 29, 2022

Choose a reason for hiding this comment

Uh oh!

mollfpr commented Mar 30, 2022

Uh oh!

Santhosh-Sellavel left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Mar 30, 2022

Uh oh!

OSBotify commented Mar 30, 2022

Uh oh!

OSBotify commented Apr 5, 2022

Uh oh!

Uh oh!

mollfpr commented Mar 18, 2022 •

edited

Loading

Santhosh-Sellavel commented Mar 23, 2022 •

edited

Loading

Santhosh-Sellavel commented Mar 28, 2022 •

edited

Loading

Santhosh-Sellavel left a comment •

edited

Loading