[$4000] Android - Edit message - keyboard is dismissed after selecting an emoji @Tushu17

[kbecciv]

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 steps:

1. Send a message in any chat in App
2. Long press the message and tap on Edit message
3. Tap on the emoji picker
4. Select an emoji and observe the keyboard is dismissed

Expected results:

The alphabetical keyboard should not be dismissed after selecting an emoji

Actual Result:

Keyboard doesn't open up after selecting emoji.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.69.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/171174709-69b79478-f54a-4c55-b84b-114f7ec51087.mp4

Upwork URL: https://www.upwork.com/jobs/~01f30fad98ca9b6c69

Issue reported by: @Tushu17

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1650039236885699

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018e351e7d34632075
• Upwork Job ID: 1599837238530191360

[melvin-bot[bot]]

Triggered auto assignment to @trjExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot[bot]]

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

[trjExpensify]

👋 @kbecciv @Tushu17, it took me a second to figure this out based on the steps provided and the issue title. Do you think it's more accurately described as:

Title: Android - Edit message - keyboard is dismissed after selecting an emoji

Action steps:

1. Send a message in any chat in App
2. Long press the message and tap on Edit message
3. Tap on the emoji picker
4. Select an emoji and observe the keyboard is dismissed

Expected results: The alphabetical keyboard should not be dismissed after selecting an emoji

Let me know and we can update this for clarity.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[trjExpensify]

Cool, updated. Ready for engineering triage!

[Julesssss]

I can reproduce it, but I think the expected result should be modified to the following:

The alphabetical keyboard should re-open if it was closed when we displayed the emoji picker

Does anyone disagree? It makes more sense to me that we would close the keyboard while the emoji picker is open, then re-open it ONLY if it was open prior to the emoji picker being selected.

[trjExpensify]

Isn't it always open prior when editing? 🤔

[Julesssss]

Not if the user manually closes the keyboard. I do this when writing a long message so i can review the full message in a single screen.

Though rare, I would be annoyed if I finished writing a message, closed the keyboard, added an emoji and then saw the keyboard pop up again. Especially because it's super laggy.

[Tushu17]

Hey @Julesssss, The behaviour is also inconsistent. The keyboard opens after selecting the emoji at composer.

https://user-images.githubusercontent.com/89839952/173139625-60c1c741-53b7-4d55-b610-2c93d0242f41.mov

.

[Julesssss]

Thanks, @Tushu17.

@trjExpensify this is the case which I believe should be excluded:

https://user-images.githubusercontent.com/10736861/173361430-d66f93e4-077c-417a-809e-a187e1795f88.mp4

[trjExpensify]

^^ Ah right yes, but that's not in edit mode is it?

[Julesssss]

That's true. But I still think our solution should revert the keyboard state to the state it was in prior to opening the emoji menu. This handles both the original bug, and the annoying edge-case I pointed out

[Julesssss]

I think the issue should be 'ensure the keyboard state matches the pre-emoji menu state', and I'll list both use cases as tests. That should ensure we attract good proposals.

[trjExpensify]

Okay cool, I see what you're saying. Let's do it. 👍

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[melvin-bot[bot]]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @Julesssss is eligible for the Exported assigner, not assigning anyone new.

[Julesssss]

Awaiting proposals

[trjExpensify]

Upwork job here: https://www.upwork.com/jobs/~01f30fad98ca9b6c69

[parasharrajat]

This used to work.

[asfandyarsheikh]

Saw this on upwork. Is it good design practice to open a separate bottom sheet for emojis? Why not use a custom keyboard that allows emoji input via separate tab? Something like this https://wix.github.io/react-native-ui-lib/docs/components/keyboard/KeyboardAccessoryView

[yashwant-dangi]

Proposal

For the EmojiPickerButton component, onModalHide callback if we add a timeout of around 50-100 ms in the Interaction Manager then this issue can be resolved.

https://github.com/software-mansion/react-native-screens/issues/89#issuecomment-514935753

https://user-images.githubusercontent.com/43725028/173767631-25bdc0cc-9202-47d6-b41a-81bab7fc1b3d.mp4

[Julesssss]

Thanks @yashwant-dangi. I'd prefer a solution that doesn't rely on a Timeout preferably.

[Julesssss]

Still awaiting proposals. @trjExpensify can you please double the job price? (I assume we double in UpWork as well as just updating the issue title?)

[trjExpensify]

Yep, done! https://www.upwork.com/jobs/~01f30fad98ca9b6c69

[trjExpensify]

Not overdue, Melv. Awaiting proposals.

[Julesssss]

@trjExpensify please double again

[trjExpensify]

Donezo: https://www.upwork.com/jobs/~01f30fad98ca9b6c69

[mdneyazahmad]

Proposal

There existed the same issue on composer and is fixed by a workaround with setTimeout by this PR.

https://github.com/Expensify/App/blob/d7dc3eea13bdb2af3e606530dc42058ca0a291ee/src/pages/home/report/ReportActionCompose.js#L334-L352

https://github.com/Expensify/App/blob/d7dc3eea13bdb2af3e606530dc42058ca0a291ee/src/pages/home/report/ReportActionCompose.js#L638-L642

---

Maybe it has been missed there. My proposal is to do the same thing on edit composer. The only reason I propose this way is because we already have deployed the same workaround.

https://github.com/Expensify/App/blob/d7dc3eea13bdb2af3e606530dc42058ca0a291ee/src/pages/home/report/ReportActionItemMessageEdit.js#L227-L231

Let me know whether this proposal is accepted or I think we should also find a solution to the previously deployed workaround.

[parasharrajat]

Ok, I see. Although we have adopted a workaround previously, it does not mean that we should do that always.

Let me know whether this proposal is accepted or I think we should also find a solution to the previously deployed workaround.

Yeah, try to find the solution to the real problem of why the keyboard is not opening? Let's see some root cause analysis.

FYI @mdneyazahmad your proposal matches with https://github.com/Expensify/App/issues/9252#issuecomment-1156088875 .

[trjExpensify]

Any further ideas here @mdneyazahmad?

[Julesssss]

Not overdue

[trjExpensify]

Doubled on upwork: https://www.upwork.com/jobs/~01f30fad98ca9b6c69

[melvin-bot[bot]]

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

[parasharrajat]

Waiting for proposals.

[aneequeahmad]

Proposal

Problem:

• Root cause of the issue is in file https://github.com/Expensify/App/blob/c2ecea533a3805bbe547b48d61baa8c24a1f89ef/src/pages/home/report/ReportActionItemMessageEdit.js#L215-L222
• Whenever onBlur of Composer in ReportActionItemMessageEdit.js is triggered with first argument as true https://github.com/Expensify/App/blob/c2ecea533a3805bbe547b48d61baa8c24a1f89ef/src/pages/home/report/ReportActionItemMessageEdit.js#L221 which causes to show compose input https://github.com/Expensify/App/blob/4d15590c44fe8bb3f2ab50a3f8e24c0e859e1b8b/src/libs/toggleReportActionComposeView/index.js#L3-L9

Solution: Setting false instead of true here toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen()); fixes the issue

• Attached video after the fix

https://user-images.githubusercontent.com/36359331/179383445-05ea0698-b56b-4cf4-b357-ba7205d3c2a5.mov

[parasharrajat]

What is the effect of this change @aneequeahmad?

[aneequeahmad]

@parasharrajat Effect of setting the first argument to false in toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen())

• 'true' is used to show the ComposeInput and onBlur as on every interaction(like clicking outside the EditComposeInput) onBlur is triggered and causing the the ComposeInput to show and even focuses ComposeInput if it has draft message.

• Setting this argument to false prevents to show ComposeInput onBlur for smallScreeDevices as i mentioned above in proposal

• We don't need to show ComposeInput onBlur as showing it is already handled when cancel or save changes button are pressed.

Also, as you mentioned above this used to work. You're right this used to work before 18th May 2022 and these changes were added by this PR in this commit

[parasharrajat]

I am trying to get the context behind onBlur changes.

[trjExpensify]

@parasharrajat @Julesssss are we good with this proposal, what's the next step?

[Julesssss]

This proposal seems to resolve the issue, but I'd like to see the answer to this before we approve:

I am trying to get the context behind onBlur changes.

[parasharrajat]

I got the update on the previous changes and we do want to enable the composer to blur on the edit box. Blur can be triggered via clicking on Save or Cancel buttons as well as a normal blur on the EditBox.

So proposal is not valid.

[aneequeahmad]

@parasharrajat Oh alright i didn't know that this is a feature and we want to enable the composer to blur

Updated Proposal

Problem

• We need to not run toggleReportActionComposeView(true, VirtualKeyboard.shouldAssumeIsOpen()); on blur as another button having action (opening emojiPicker) is clicked like save and cancel

Solution:

• Define an ID in constructor after line#76 in EmojiPickerButton as this.emojiButtonID = 'emojiButton'; https://github.com/Expensify/App/blob/c2ecea533a3805bbe547b48d61baa8c24a1f89ef/src/pages/home/report/ReportActionItemMessageEdit.js#L75-L77

• Pass ID as prop in EmojiPickerButton component as nativeID={this.emojiButtonID} here

https://github.com/Expensify/App/blob/c2ecea533a3805bbe547b48d61baa8c24a1f89ef/src/pages/home/report/ReportActionItemMessageEdit.js#L229-L231

• Assign nativeID from props to Pressable in EmojiPickerButton https://github.com/Expensify/App/blob/66a05aa4015f96f5bab59929698d517a616620d1/src/components/EmojiPicker/EmojiPickerButton.js#L27-L34

• Return from onBlur to prevent re-render when emoji button is pressed which cancels the onPress event by re-rendering. if (_.contains([this.saveButtonID, this.cancelButtonID, this.emojiButtonID]... https://github.com/Expensify/App/blob/c2ecea533a3805bbe547b48d61baa8c24a1f89ef/src/pages/home/report/ReportActionItemMessageEdit.js#L216-L218

[trjExpensify]

@parasharrajat thoughts on the above?

[aneequeahmad]

@marcaaron This is the relevant issue. I came to know that

• we do want to enable the composer to blur on the edit box. Blur can be triggered via clicking on Save or Cancel buttons as well as a normal blur on the EditBox.

So i think to solve this keyboard dismiss issue on EmojiPicker we have to stop the method to toggle the composer (toggleReportActionComposeView) as it is preventing the users to take actions like we have done for save and cancel buttons.

cc: @parasharrajat

[parasharrajat]

Testing the proposal in a few hours.

[parasharrajat]

How will this proposal solve the issue on Android @aneequeahmad?

[aneequeahmad]

@parasharrajat when i debugged the issue pressing the emojiPicker button wasn't doing any action. But now it is opening the emojiPicker on latest build 1.1.87-6 so The above proposal is not valid.

PROPOSAL

We only need to add InteractionManager.runAfterInteractions(() => setTimeout(() => this.textInput.focus(), 100)) here onModalHide.

https://github.com/Expensify/App/blob/d6417564acf9d34bad12231dcbc228fcb5c67f98/src/pages/home/report/ReportActionItemMessageEdit.js#L218-L221

AFTER FIX

https://user-images.githubusercontent.com/36359331/182445232-aaa5ba38-e6c8-4c52-9f09-4b2d87aeceb3.mp4

[parasharrajat]

when i debugged the issue pressing the emojiPicker button wasn't doing any action. But now it is opening the emojiPicker on latest build 1.1.87-6 so The above proposal is not valid.

Then how did you test this issue? Issue steps clearly indicate that it happens after opening the emoji picker.

A similar proposal exists. One thing that I noticed during your proposals @aneequeahmad is that you jump between solutions after review. Most of the time, your previous proposals are completely different from new ones. This is not a problem but it indicates that your proposal lacks clear testing and analysis on the issue.

For example, your previous proposal does not solve Android or does not have any effect on Android but the issue clearly indicates that the affected platform is Android. This is a very bad practice and should be avoided at all costs. This exhausts premium review time and also creates a clutter of bogus information on the issues.

Next time, I will reject the proposal without giving reasons. Please do comprehensive testing on your solution before making a proposal. Disclose all the parameters that are necessary for your proposal. Do not assume that the reviewer might know things.

Thank you.