[HOLD PR #23994][$1000] The keyboard is re rendered when an emoji appears

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. select a chat
2. click on emoji
3. select a emoji

Expected Result:

the keyboard should not re-rendered when we select an emoji

Actual Result:

keyboard is re-rendered when we select an emoji and also there is a flickering of the page

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.35-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1688151270.1.mov

RPReplay_Final1688217113.MP4

Expensify/Expensify Issue URL:
Issue reported by: @eusalazar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688152676612889

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01db7d5a756e5284d5
• Upwork Job ID: 1676298806542942208
• Last Price Increase: 2023-07-25

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[nitin-kukreti]

according to Expected Result and Actual Result this is not an issue as they both are same

[kavimuru]

@nitin-kukreti updated the steps, Keyboard rerenders and also you can see a weird flicker of the page too.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01db7d5a756e5284d5

[melvin-bot]

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

[mallenexpensify]

was able to reproduce, moving along

[melvin-bot]

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

[soustab10]

The problem will be solved by: leveraging the shouldComponentUpdate method in thecomponent and checking for specific conditions related to the keyboard event.

import React, { Component } from 'react';
import { TextInput } from 'react-native';

class EmojiSafeTextInput extends Component {
  shouldComponentUpdate(nextProps) {
    // Prevent re-rendering when the keyboard event is related to emoji selection
    if (
      this.props.value !== nextProps.value ||
      (this.props.selection && nextProps.selection &&
        this.props.selection.start === nextProps.selection.start &&
        this.props.selection.end === nextProps.selection.end)
    ) {
      return false;
    }
    return true;
  }

  render() {
    return <TextInput {...this.props} />;
  }
}

export default EmojiSafeTextInput;

In this example, the EmojiSafeTextInput component extends the TextInput component from React Native. The shouldComponentUpdate method is overridden to handle comparing the value and selection properties. If the selection's value or start and end positions remain the same, indicating an emoji selection event, the method returns false, preventing the component from re-rendering.

Another way could be to use: Memoized Selectors with Reselect
Reselect is a third-party React library for creating memorized selectors. It is commonly used with Redux stores and has amazing features to reduce unnecessary re-renderings.

Reselect selectors are capable of computing derived data.
Reselect selectors do not recompute unless their arguments are changed.
They can be used as inputs to other selectors.
Reselect provides an API named createSelector, and it can generate memoized sector functions.

[melvin-bot]

📣 @soustab10! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[soustab10]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01027be2b5196dd817

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[kpadmanabhan]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01063aad97ce0e22c6

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

the keyboard should not re-rendered when we select an emoji

What is the root cause of that problem?

In iOS, when a modal (emoji modal) is opened while the keyboard is still opened, the default behavior is that the keyboard will be closed, then after the modal is closed, the keyboard will reopen again.

This is the root cause and it's why the issue only happens on iOS.

What changes do you think we should make in order to solve the problem?

We can simply dismiss the keyboard (Keyboard.dismiss();) here https://github.com/Expensify/App/blob/f9a8529f18696b2584d57c960933cefdf7b2e6af/src/components/EmojiPicker/EmojiPickerButton.js#L36C22-L36C22 before calling EmojiPickerAction.showEmojiPicker

The composer is already automatically focused after the emoji picker closes.

What alternative solutions did you explore? (Optional)

If we want to wait for the keyboard to close completely before opening the emoji picker, we can do the following:

In here https://github.com/Expensify/App/blob/f9a8529f18696b2584d57c960933cefdf7b2e6af/src/components/EmojiPicker/EmojiPickerButton.js#L36C22-L36C22, we'll only open the modal after the keyboard hides completely

if (this.props.isKeyboardShown) {
    Keyboard.dismiss();

    const listener = Keyboard.addListener('keyboardDidHide', () => {
        EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor);
        listener.remove();
    });
} else {
    EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor);
}

(withKeyboardState needs to be added)

The above is reusable so we can create an util like dismissKeyboard(onDismissed)
and do dismissKeyboard(() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor))

[melvin-bot]

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

[abdulrahuman5196]

Will provide review on the proposals in the morning

[melvin-bot]

Current assignee @abdulrahuman5196 is eligible for the Internal assigner, not assigning anyone new.

[abdulrahuman5196]

@mallenexpensify Gentle ping on this #22052 (comment)

[abdulrahuman5196]

@mallenexpensify We should just close this. The other issue has a contributor assigned

[ntdiary]

The two issues are slightly different in nature. We know that in iOS, UIKit will save the keyboard state when opening a modal, and then forcibly restore it when closing the modal.

For this issue, the keyboard flashing is because we call Keyboard.dismiss() when opening the modal, which competes with UIKit saving the keyboard state.
For the issue #13922, the current code doesn't call dismiss. Just when the UIKit restores the keyboard after closing the attachment modal (the first modal), we immediately open a new modal (which hides the keyboard again, so it looks like flashing).

Finally, the patch to react-native in my PR is intended to resolve the keyboard competition, because the attachment modal will also call blur( which has the same effect as dismiss), so it just happens to also fix this issue. 🙂

Just making a small note here. : )

[abdulrahuman5196]

Thanks for the information @ntdiary . Then I think we can have this on hold @mallenexpensify just to reverify after the other issue is closed.

[melvin-bot]

@mallenexpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[mallenexpensify]

@ntdiary I saw you got hired for #13922 last week, do you think it's best to put this on hold, pending that being fixed or should we fix this independently? Also.. thanks for the comments above. Also, also... sorry I've been lagging (espec to @abdulrahuman5196 ), I was out a bit and have a project with a deadline I've been focused on.

[ntdiary]

@ntdiary I saw you got hired for #13922 last week, do you think it's best to put this on hold, pending that being fixed or should we fix this independently?

@mallenexpensify, if this is not a very urgent issue, we could wait for PR #23994 to be merged (i.e., put this issue on hold), since the patch file there also fixes this issue. 🙂

[melvin-bot]

@mallenexpensify, @abdulrahuman5196 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

@mallenexpensify, @abdulrahuman5196 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

@mallenexpensify, @abdulrahuman5196 12 days overdue now... This issue's end is nigh!

[mallenexpensify]

Thanks @ntdiary , put this on hold pending
#23994

[shubham1206agra]

Looks like this is fixed now. #23994 (comment)
@mallenexpensify You can close this one.

[mallenexpensify]

Closing. The bug reporting bounty isn't eligible because #13922 was reported well before this issue