[HOLD for payment 2022-03-24] Tablet landscape - It's difficult to select emoji in tablet - reported by @Tushu17

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app on IPad
2. Navigate to any chat
3. Select Emoji picker and try to pick emoji

Expected Result:

On Tablets with touchscreen in landscape mode, hide the custom emoji option so users cannot open it. They have an in-build emoji keyboard in Android/iOS.

Actual Result:

When user is on iPad keyboard doesn't close and emoji picker is barely visible on top, which makes it impossible to use.

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android
• mWeb

In all cases, the issue occurs on tablet sized screens in landscape mode, which is often the preferred screen orientation for these devices. Hence we should aim to fix this.

Version Number: 1.1.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

XRecorder_27012022_030844.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643233263018900

Job Post: https://www.upwork.com/jobs/~01a1ebe114edb576b2

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

I would like to point out that the video does not show iPad and iOS, but an Android tablet and it also feels like the tablet has quite a small screen. @Tushu17 could you please confirm a model of the table this was tested on and its screen size (viewport)?

For example, due to these design issues, we are not supporting landscape mode on phones. This screen seems smaller than 11inch iPad to me.

I am not sure what the ideal solution would be here. Either we could not open the keyboard in landscape and only shown the emoji popup but I am not sure how possible that is. Other less ideal solution would be to not allow users to use the emoji picker in landscape mode and smaller sizes, however, that is not preferred as we want to find a way to make features available for as many users/devices as we can.

@Tushu17 Can you please provide details about the device this was tested on, just to help with reproducing and fixing the issue body since it is incorrect. OR on the other hand show a video of ipad, where this is broken too. Thank you very much!

[Tushu17]

Hi @mountiny, here's a screenshot of iPad(11 inch)
the issue is for mWeb(iPad, Tablet)

[MelvinBot]

Triggered auto assignment to @kevinksullivan (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mountiny]

Thank you @Tushu17.

I think we should definitely look into this problem and try to solve it as for tablets this screen orientation is the most popular I would say.

Potential solutions could be:

• Make sure the keyboard closes when selecting the emoji on screens small enough that we know this problem would occur
  • This is probably not an ideal solution since we are making it harder for the user to then continue typing when adding the emojis
  • For searching the emojis, we need the keyboard to be visible, obviously
• For smaller screensizes in landscape mode, let's update the design of the emoji picker so it fits into the smaller available space. We could shape the emoji box to be more horizontally oriented.

However, given the video share from the android table, there is no space literally given how small the screen is. I am not sure what the best way here would be as in that case, we can't hide the keyboard, but there is also no space on the screen given the tabs and browser lookup text field.

Solution

I would propose to identify viewport size in landscape which breaks this behaviour and from that breakpoint, we would disable the custom emoji picker. We would not show the button in the composer box. Users have a workaround which is the native keyboard built emoji option. We do not offer any new or custom emojis yet so I feel like this might be the easiest solution that will prevent us from providing user bad UX while making sure everything works.

I would not use the custom emoji picker being on a mobile device as I am used to using the platform native emoji keyboard.

cc @kevinksullivan what do you think?

[thesahindia]

Proposal

I think we can show the emoji picker menu like we do on the app and for this we can use canUseTouchScreen( ) instead of isSmallScreenWidth inside emojiPickerMenu and Popover. It will also make the popovers consistent as currently the popovers on app(tablet) and mWeb(tablet) are different. Ex:-

App

mWeb

here's how the emoji picker menu will look after the change:-

[mountiny]

@thesahindia Thank you for the proposal. How would it behave when typing a text, choosing an emoji and then typing again. I am afraid the transitions/animations between these might be too sluggish and it might not look the best.

Also on the screenshot provided the text user is composing is not visible. I believe we should make sure the text will be visible when choosing the emoji. But I understand you have provided the screens for visualization so it might not be a problem in really.

[thesahindia]

Also on the screenshot provided the text user is composing is not visible. I believe we should make sure the text will be visible when choosing the emoji.

Yeah I agree, the text should be visible. Currently our emoji picker hides the compose field. Should we log this as an other issue as it is not only for tablet?
here's a vid of ios app:-

Screen.Recording.2022-02-07.at.10.01.17.PM.mov

[mountiny]

@thesahindia ah, I see. As I use the in-built emoji picker I have never noticed this. No, I would say it is something we can discuss in future but since it is already hiding the text on mobile, we should be fine with doing similar thing on ipad too.

Another difference is that there is no search field on mobile, which means there is no keyboard needed which would solve the issue of the small tablet size on the original screenshot/video.

[kevinksullivan]

Hm interesting one. @mountiny I agree we could hide the custom picker, but should this view/width only show the chat, rather than chat + LHN simultaneously? It looks very messy when the native keyboard appears on top of both screens at once.

[mountiny]

@kevinksullivan I am not sure what you are referring to right now.

Do you mean that on tablet landspace, we should show chat over the entire screen?

I would say it definitely looks odd on the 11inch iPad to show the emoji picker over the entire width. Especially if now we are not providing custom emojis AND the in-build native keyboard already has it and users are used to it more than the custom one.

I would vote for disabling the custom picker for landscape touchscreen 11inch and less (ipad pro 13 inch might be fine even though it is still not the best UX it could be used I guess). What do you think?

[kevinksullivan]

Do you mean that on tablet landspace, we should show chat over the entire screen?

Yeah. In your screenshot I'm not sure why there is still so much space on the left. Could we see what it looks like to make chat take the whole screen, just like it does on mobile?

I would vote for disabling the custom picker for landscape touchscreen 11inch and less (ipad pro 13 inch might be fine even though it is still not the best UX it could be used I guess). What do you think?

I agree with getting rid of the custom emoji picker. My other point above is tangential to the issue here, so I am good with moving forward.

[mountiny]

Just to confirm, I am not sure why on the screenshot (I havent made it) there is the empty space on left, but here is a screen here you can see how it actually looks like on the most common iPad I guess (9,7 inches).

When you then click on the custom emoji, the view scrolls down a bit to focus on the emoji search bar. It works but I feel like it is not the most intuitive interface and I would definitely prefer to remove the emoji picker since again, there is an emoji keyboard already built into the tablet which the users are more used to everyday use of the device.

I agree with getting rid of the custom emoji picker. My other point above is tangential to the issue here, so I am good with moving forward.

Great, I have updated the issue body to clarify what the expected output is. We would like to not show the custom emoji keyboard on landscape tablets. Would you be able to export the job, please? @kevinksullivan Thank you very much 🙇

cc @thesahindia just in case you would like to submit a proposal for that particular solution.

[MelvinBot]

@kevinksullivan, @mountiny Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@kevinksullivan, @mountiny Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@kevinksullivan, @mountiny Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@kevinksullivan, @mountiny Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@kevinksullivan, @mountiny Whoops! This issue is 2 days overdue. Let's get this updated quick!

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.41-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• remove emoji picker menu from tablets #7851

If no regressions arise, payment will be issued on 2022-03-17. 🎊

[mountiny]

@thesahindia is working on a fix PR to update the behaviour a bit as QA caught some case which we would like to avoid 🙌

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.43-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• remove emoji picker menu for medium screen width tablets #8111

If no regressions arise, payment will be issued on 2022-03-24. 🎊

[mountiny]

Updated it, the issue should automatically become daily again when it is due for payment!

[michaelhaxhiu]

@Tushu17 + @thesahindia are paid.

@rushatgabhane can you apply for this job here for the C+ payout?
~https://www.upwork.com/ab/applicants/1507128374759198720/job-details`
https://www.upwork.com/jobs/~0118b3857ad2250c08

I see 1 regression so that means 50% off the $250 right?

[rushatgabhane]

I see 1 regression so that means 50% off the $250 right?

Yes, that's right.
I can't believe I didn't argue my point in the PR itself 🤦‍♂️, would have avoided the regression

https://www.upwork.com/ab/applicants/1507128374759198720/job-details

@michaelhaxhiu I believe that isn't the job link (I can't access that page)

[michaelhaxhiu]

https://www.upwork.com/jobs/~0118b3857ad2250c08 👈 try this one plz

[michaelhaxhiu]

All set here.