[Hold for Payment] Emoji selector hides keyboard hides text input

[kavimuru]

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

1. Go to any chat
2. Select any own message
3. Click on Edit Comment
4. Click on Emoji icon

Expected Result:

Emojis are displayed below the text input box to edit the comment – the text input should still be visible.

Actual Result:

Emojis are hiding the text input box

Action Performed (2):

1. Go to any chat
2. Focus the composer.
3. Tap the emoji icon to select an emoji

Expected Result:

Emojis are displayed below the composer – the composer should still be visible.

Actual Result:

Emoji selector covers the composer, which is no longer visible.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS
• mWeb

Version Number: v1.1.49-0
Reproducible in staging?: Y
Reproducible in production?: No (new feature)
Email or phone of affected tester (no customers): mnata.utest@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5512973_ISZS6117_1_.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub
Issue was found when executing #7580

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

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

[stitesExpensify]

Commented on the main emoji picker in edit issue to see if this is a related bug

[mananjadhav]

While the emoji picker in the edit comment is added with #3245, the behavior is the same as the composer at the moment. When sending a new message too, the input is hidden. IMHO, this should be a feature request.

[parasharrajat]

I think the issue is a little different. It seems that Editor gets hidden when EmojiPicker is opened not that it is behind the picker. If editor is there but it is behind the picker then I agree it should be Feature Request.

[stitesExpensify]

Okay so how should we proceed here then? Mark as external and get a fix in?

[roryabraham]

My take on this issue is that it's an existing bug, not necessarily directly related to the new feature (emoji in the edit comment input). I don't think it's a new feature though – it's a bug.

I'm going to demote this from DeployBlocker to just a regular bug, make it external, and start the price at $500 because it's pretty severe.

[melvin-bot]

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

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[roryabraham]

GitHub won't let me change the labels 😠

[roryabraham]

Updated the OP. @NicMendonca as stated above, please start this issue at $500

[melvin-bot]

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

[melvin-bot]

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

[NicMendonca]

Upwork job: https://www.upwork.com/jobs/~0117b13ad85930bd8e

[NicMendonca]

Doubled: https://www.upwork.com/jobs/~0117b13ad85930bd8e

[eVoloshchak]

Proposal
When emoji picker is opened, add a marginBottom to ReportActionCompose that is equal to the height of emoji picker. That way, textInput will be visible on top of the picker.

Native:

22-04-13-20-13-52.mp4

mWeb:

cinnamon-20220413-1.1.mp4

Implementation:

1. Inside EmojiPickerButton, add an onOnen callback on this line

onPress={() => {
    EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor);
    props.onOpen();
}}

2. Then in ReportActionCompose we can know whether emoji picker is open, we will track it in pickerIsVisible state variable

  <EmojiPickerButton
      isDisabled={isBlockedFromConcierge}
      onModalHide={() => {
          this.focus(true);
          this.setState({ pickerIsVisible: false })
      }}
      onEmojiSelected={this.addEmojiToTextBox}
      onOpen={() => this.setState({ pickerIsVisible: true })}
  />

3. After that, we add marginBottom to ReportActionCompose's main container

<View style={[shouldShowReportRecipientLocalTime && styles.chatItemComposeWithFirstRow, { marginBottom: this.getMarginBottom() }]}>

4. And implement getMarginBottom method

  getMarginBottom() {
      if (!this.state.pickerIsVisible || !this.props.isSmallScreenWidth) {
          return 0;
      }

      return styles.emojiPickerList.height + 30;
  }

I added 30 to add a small gap between picker and text input, but I'm guessing app has some predefined spacing defined in styles.js, which can be used instead

[parasharrajat]

What is the expected behavior here? input should be shown above the picker menu. ?? cc: @kavimuru @stitesExpensify

[stitesExpensify]

Yes, you should be able to see the input you're putting the emoji into

[parasharrajat]

Getting design confirmation https://expensify.slack.com/archives/C01GTK53T8Q/p1649875294455519

[parasharrajat]

@stitesExpensify Slack is concluded with :do_nothing: What should be the next step here?

[stitesExpensify]

@NicMendonca let's pay @parasharrajat for being the contributor manager, and pay our base issue rate to @eVoloshchak for his proposal, then we can close the issue.

Thanks for pushing this forward in slack Rajat, and thank you @eVoloshchak for your proposal even though it wasn't used!

[NicMendonca]

@eVoloshchak @parasharrajat can you both apply to the job please? Thank you! - https://www.upwork.com/jobs/~0117b13ad85930bd8e

[NicMendonca]

@eVoloshchak paid!

@parasharrajat can you accept the offer please? Thank you!

[NicMendonca]

paid!