[Hold for #39597] [$500] Web - Chat - Text in composer is enlarged after removing emoji from text and sending it

[m-natarajan]

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

---

Version Number: 1.4.58.0 Reproducible in staging?: Yes Reproducible in production?: No 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 Expensify/Expensify Issue URL: Issue reported by: Applause Internal Team Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com/
2. Go to any chat.
3. Enter en emoji, followed by some text.
4. Delete the emoji.
5. Send the text.
6. Type in the composer.

Expected Result:

The text in the composer will not appear enlarged.

Actual Result:

The text in the composer is enlarged.

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/38435837/c85a7a7a-93e9-41c5-8e93-950e03183037

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013bf0f2cfd910f86b
• Upwork Job ID: 1775514075929288704
• Last Price Increase: 2024-04-10

[melvin-bot[bot]]

Triggered auto assignment to @bondydaa (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions[bot]]

:wave: 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[bot]]

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

[m-natarajan]

We think this bug might be related to #vip-vsb

[m-natarajan]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[thienlnam]

Not a blocker, though this is funny - added to the main tracking issue

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~013bf0f2cfd910f86b

[sonialiap]

Adding external label

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @happylifesdev! 📣 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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[jjcoffee]

@happylifesdev Please make sure you read through our contributing guide and make sure to use the proposal template.

[fatcat529]

I analyzed the text size problem in the project in detail. As you can see from the video uploaded below, you can see that the font-size of the Text Input that the id of element is root, remains the font-size of the emoticon. It is estimated that the tube problem between the emoticon module and the text input is estimated. I think we need to find the cause in the emoticon module, or if we find an element that the id of element is root in the HTML page, you will always solve the problem if you attach a little code to the code so that font-size keeps 15px.

https://drive.google.com/file/d/17LCUxb9URVbofFTXZ621pVdSI75uIVl1/view?usp=sharing

Phone: 12818960915(whatsapp) Mail: happylifesdev@gmail.com

Contributor details Your Expensify account email: happylifesdev@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/hemanthbellala

[melvin-bot[bot]]

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

[jjcoffee]

@happylifesdev Please follow the proposal template by copy and pasting it into the comment box and filling out all fields. Thanks! :pray:

[withmussy]

Proposal

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

Text in composer is enlarged after removing emoji from the text and sending it

What is the root cause of that problem?

To understand the problem, let's look at two scenarios where this issue doesn't happen:

First Scenario:

1. Add an emoji and some text.
2. Remove the emoji.
3. Press the left or right arrow key.
4. Send the text.
5. Type again in the composer.

Here, the text size remains normal at 15px.

Second Scenario: If we use the following code to clear the text, the next text size stays normal. However, refreshing the page brings back a space in the composer.

this line is in ComposerWithSuggestions file line 482

updateComment(' ');

The issue seems to be with the updateComment function and how the MarkdownTextInput component handles empty inputs. It incorrectly sizes new text at 20px within a span tag unless the ComposerWithSuggestions.tsx component is re-rendered by an action like pressing an arrow key or receiving a non-empty input.

The core issue lies with the @expensify/react-native-live-markdown package in the composer component.

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

I have two suggestions:

Main Idea: Improve the @expensify/react-native-live-markdown so it resets correctly with empty inputs or fully removes the span tag after an emoji is deleted. This approach targets the core of the problem.

Alternative: As a quick fix, we could reset the Composer component inside ComposerWithSuggestions right after sending a message. However, this is more of a temporary workaround.

I recommend the first solution for a lasting fix. Looking forward to your thoughts and approval to proceed.

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

📣 @withmussy! 📣 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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[withmussy]

Contributor details Your Expensify account email: mostafasalehi796@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~016b2ad2638bba37f2

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@sonialiap, @jjcoffee, @thienlnam Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sonialiap]

@jjcoffee what do you think of the proposal?

[jjcoffee]

@withmussy Thanks for your proposal! Please can you update your proposal to provide more details in your solution? We need specifics on what changes you propose to make.

[withmussy]

@jjcoffee, thank you for considering my proposal. I sent you two solutions. Which one do you prefer?

[thienlnam]

This looks related to https://github.com/Expensify/App/issues/39261, and should be fixed in https://github.com/Expensify/App/pull/39597 I believe

[jjcoffee]

Agreed, @sonialiap can we add a HOLD for https://github.com/Expensify/App/pull/39597? Thanks :pray:

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@sonialiap @jjcoffee @thienlnam this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

@sonialiap, @jjcoffee, @thienlnam Huh... This is 4 days overdue. Who can take care of this?

[sonialiap]

https://github.com/Expensify/App/pull/39597 is merged but not deployed, still on hold for it ⏳

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[thienlnam]

We're live!