[HOLD on #40181] [$125] mWeb - Chat - Next to emoji entering single alphabet, doesn't turn emoji into small

[lanitochka17]

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

---

Version Number: 9.0.29
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4919658
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch site in both mweb and Android
2. Open a chat
3. Open emoji picker near compose and select an emoji
4. In mweb, after selecting emoji, enter a single letter
5. Note emoji remains big
6. In mweb, after selecting emoji, enter a single number
7. Note emoji turns small
8. In Android, after selecting emoji, enter a single number
9. Note emoji turns small

Expected Result:

Next to emoji entering single alphabet, must turn emoji into small

Actual Result:

Next to emoji entering single alphabet, doesn't turn emoji into small in mweb. But emoji turns small in Android

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6592449_1725420302812.Screenrecorder-2024-09-04-08-47-36-296_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832331364813666635
• Upwork Job ID: 1832331364813666635
• Last Price Increase: 2024-09-28

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@twisterdotcom 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

[twisterdotcom]

Very niche, downgrading to weekly and 125.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[QasimBham]

Hi !
I'm Qasim from upwork. I saw the complete code and i think i can fix that. The problem you are facing maybe issue of different styling or viewport and screen scaling. I'm confident that i can fix that.

[melvin-bot]

📣 @QasimBham! 📣
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>

[QasimBham]

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

Hi !
I'm Qasim from upwork. I saw the complete code and i think i can fix that. Ive tested it on mweb and yes the emoji turns small after typing 2 letters. The problem you are facing maybe issue of different styling or viewport and screen scaling. I'm confident that i can fix that. Let me know if you have any further queries.

[melvin-bot]

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

[ikevin127]

@QasimBham Please refer to the Contributor Guidelines and if still interested and you're able to reproduce the issue, you can submit a proposal following the proposal template -> for clarity, it is recommended to use code examples from the codebase for both root cause and solution questions from the proposal tamplate.

[ChavdaSachin]

It rather looks like react-native bug. In provided video when typing on web a thin underline is visible under the letter which happens when keyboard is capturing word and no website style is applied to the text yet(means text is not yet captured by web).

See these screenshot

See when translator is used and the text is captured by keyboard same issue happens even for other markdown. This might be caused by how react-native handles text-input on browser and natively.

[QasimBham]

I think this issue is related to styling and viewport scaling rather than react native because the issue you are facing is in mweb and not in the mobile app.

[klajdipaja]

@lanitochka17 This is not reproducible in the latest stage on mWeb and there are some commits in the related feature, maybe it was fixed since you opened the issue ?

[melvin-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]

@twisterdotcom @ikevin127 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!

[ikevin127]

Still looking for proposals!

Maybe we can ask people that worked / have more context on react-native-live-markdown like @BartoszGrajdek for their take on this one and whether or not this is something worth fixing.

[Skalakid]

Hi @ikevin127, is this issue still reproducible? Everything seems to work fine on the latest main

Screen.Recording.2024-09-20.at.10.00.31.mov

[melvin-bot]

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

[ikevin127]

@Skalakid Hi, yes I'm able to reproduce:

android-android-mweb.webm

Issue seems to be that on Android: mWeb inputting alphabet characters next to emoji -> doesn't size down the emoji within the composer, which does happen on Android: Native.

Note

Observations

1. This only happens with alphabet characters, anything else like symbols and numbers do size down the emoji.
2. Despite this discrepanci which happens in the Composer, when the message is actually posted -> the emoji is always sized down when there's a character before or next to it.
3. (out of scope) The composer height also looks weird on Android: mWeb compared to Android: Native (see below).

Android: mWeb	Android: Native

[Skalakid]

Hmm, I still can't reproduce this on the late main and staging. Also, I've tried to do it on the physical device, but without success. On what device are you checking this? It might be a problem with text composition and how some Android devices handle it

Screen.Recording.2024-09-25.at.11.58.10.mov

[melvin-bot]

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

[Skalakid]

Reproducible on physical devices with Samsung keyboard, here is the PR with the fix

[twisterdotcom]

Okay, would any of the above proposals resolve it @ikevin127?

[ikevin127]

@twisterdotcom We don't have any formal proposals to review here, but as I mentioned in a comment above where I reproduced the issue - it's highly likely that the issue is react-native-live-markdown (library) related.

This was confirmed by @Skalakid in #48551 (comment) where they also mentioned that there's already a open PR that includes the fix for this issue, on the library side.

All that's left to do here is to await for that react-native-live-markdown PR to be merged and then for a react-native-live-markdown version bump PR on E/App side which will fix our issue.

What we need to figure out next is who's going to handle the E/App version bump PR, if there's already somebody assigned for that or if we need to assign somebody.

[Skalakid]

@ikevin127 I handled the library version bump here. The PR is already merged, so this issue should be fixed now :D

[ikevin127]

Cool, thanks for handling that!

@twisterdotcom I guess the only thing left to do here is re-test the issue and if we confirm it was fixed then we can close.

Will test it today and get back with my results.

Edit

Unfortunately the bump was reverted, so we should put this on hold again

[thienlnam]

Unfortunately the bump was reverted, so we should put this on hold again

[mvtglobally]

Issue not reproducible during KI retests. (First week)