Repository navigation
[HOLD for payment June 27] Emoji Picker is slow to add emoji on Native Platforms and doesn't pull up the keyboard afterwards #2920
Description
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Upwork posting: https://www.upwork.com/jobs/~01572e274a1ada4be0
Expected Result:
The emoji picker should add the emoji instantaneously and pull up the keyboard afterwards.
Actual Result:
The emoji picker takes a half second to add an emoji once it's been tapped on, and the keyboard isn't pulled up afterwards.
Action Performed:
- Navigate to any conversation on mobile.
- Open the emoji picker and tap on any emoji.
Workaround:
Yep, just bad UX
Platform:
Where is this issue occurring?
iOS
Android
Activity
[-]Emoji Picker is slow to add emoji on Native Platforms and doesn't pull up keyboard afterwards[/-][+]Emoji Picker is slow to add emoji on Native Platforms and doesn't pull up the keyboard afterwards[/+]MelvinBot commentedon May 21, 2021
Triggered auto assignment to @Jag96 (
External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.Jag96 commentedon May 24, 2021
Exported to upwork: https://www.upwork.com/jobs/~01572e274a1ada4be0
waheed25 commentedon May 24, 2021
Keyboard will keep open while it is in the focus and once it goes out of focus it will be hide and will be focused once it is in the focus, there requires a
textInputwith some emoji value which you wanted to display, Pressing on it will immediately open the keyboard while in the focus we can get the value of input from state to add the emoji.Jag96 commentedon May 24, 2021
@waheed25 per our contributing guidelines, could you please add some more details about what is causing the issue and what changes you'll make to the code to fix this issue?
waheed25 commentedon May 24, 2021
@Jag96 The reason of keyboard get hidden because it gets unfocused somehow and, keyboard will keep displayed as it in focus we need to make sure that keyboard not goes out of focus, also if we wanted to perform some action on keyboard open and close we can use keyboard listeners.
Slowness could be some extra re-renders so need to look which components get re-renders on this change.
The ultimate goal is to achieve 60FPS with all the interaction and smooth user experience.
aliabbasmalik8 commentedon May 25, 2021
PROPOSAL:
and need to
value={this.comment}at this pace to update instantaneouslyhttps://github.com/Expensify/Expensify.cash/blob/641acd1641cbb7144b3dc89ff60dc1ca30ae67bb/src/pages/home/report/ReportActionCompose.js#L392
and for focus issue need to call
focusmethod in this methodhttps://github.com/Expensify/Expensify.cash/blob/641acd1641cbb7144b3dc89ff60dc1ca30ae67bb/src/pages/home/report/ReportActionCompose.js#L270
Thanks
jasperhuangg commentedon May 25, 2021
@aliabbasmalik8
Not sure if that will change anything, since we're already directly setting the
valueattribute here, which should be the same thing (I could be wrong though). Also, we'd have to set it up as a state value to get the component to re-render.I might have tried this to no success. Since it's a relatively quick change, can you try it out first and post a screen recording of it working with your proposal?
cc @Jag96
aliabbasmalik8 commentedon May 25, 2021
@jasperhuangg
I added
setTimeout(this.focus, 400);at this placehttps://github.com/Expensify/Expensify.cash/blob/641acd1641cbb7144b3dc89ff60dc1ca30ae67bb/src/pages/home/report/ReportActionCompose.js#L274
NOTE: we used
react-native-modalpackage to show modal and in modal it takes 300 ms to animateOut so that the reason I usedsetTimeoutand added
value={this.comment}at this place to update instantaneouslyhttps://github.com/Expensify/Expensify.cash/blob/641acd1641cbb7144b3dc89ff60dc1ca30ae67bb/src/pages/home/report/ReportActionCompose.js#L393
and it worked accordingly.
https://user-images.githubusercontent.com/31027036/119446325-17555b00-bce3-11eb-8c87-c602bd07bd71.mp4
Thanks
21 remaining items
Jag96 commentedon Jun 22, 2021
Reopening, regression found here: #3392 (comment)
parasharrajat commentedon Jun 22, 2021
@Jag96 I tried few approaches but all seem to fail. Safari blocks the keyboard on Async call of focus. More info here #3719 (comment).
So I think we won't be able to do it at the moment. Let me know what do you think here.
Jag96 commentedon Jun 23, 2021
Thanks for the context, I agree we can leave it as is then since it only affects Safari on iOS 👍. Closing
[-]Emoji Picker is slow to add emoji on Native Platforms and doesn't pull up the keyboard afterwards[/-][+][HOLD for payment June 27] Emoji Picker is slow to add emoji on Native Platforms and doesn't pull up the keyboard afterwards[/+]Jag96 commentedon Jun 23, 2021
And reopening to keep track of payment 😄
Jag96 commentedon Jun 29, 2021
Paid!