[$500] mWeb - Compose Box - The magnifying glass moves up when words are highlighted

[lanitochka17]

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.3.93-0 Reproducible in staging?: Y Reproducible in production?: N 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:

Issue found when executing PR https://github.com/Expensify/App/pull/29434

Action Performed:

1. Open https://staging.new.expensify.com/
2. Log in with an expensifail account
3. Open any chat and paste an RTL text in the compose box, for example " مثال "
4. Write any word in English, for example, "Hello."
5. Highlight the word "Hello" and move the selection cursor all the way to the left to fully highlight the word "مثال" at the same time

Expected Result:

When English and Arabic words are highlighted at the same time, the magnifying glass should magnify the highlighted text and not move across the screen beyond the text

Actual Result:

When English and Arabic words are highlighted at the same time, the magnifying glass moves upward

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

https://github.com/Expensify/App/assets/78819774/4fba87af-90c2-4f8b-b24b-82b1d4ddef99

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015947874fc7315d53
• Upwork Job ID: 1721635785637269504
• Last Price Increase: 2023-11-20

[melvin-bot[bot]]

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

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

[OSBotify]

: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 @srikarparsi (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[HardikChoudhary24]

I believe this behaviour is occurring due to the concatenation of the LTR marker \u2066 with the text containing RTL characters . This issue doesn't arise when we only enter LTR characters as we are not adding the LTR marker in this case. I'm unsure about how to fix this, as the LTR marker is necessary to ensure that RTL text renders from left to right.

[srikarparsi]

Messaged @neil-marcellini about it since it seems to be from this PR

[neil-marcellini]

This is a weird one. I don't think we should block the deploy for it since most users don't type in RTL characters.

[srikarparsi]

Hey @stephanieelliott! Going to un-assign myself for now and let this go the regular bug route since I believe it can be solved externally if it is reproducible and worth fixing.

[melvin-bot[bot]]

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

[stephanieelliott]

Adjusting labels to be fixed externally

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

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

[stephanieelliott]

Reapplying the Bug label to get another BZ member on this while I am OOO til Nov 13. Thanks @NicMendonca, I'll grab this back from you when I return!

[barttom]

Hey! I'm Bartek from Callstack and I would to work on this issue.

[barttom]

I can't reproduce that. For me composer behaves other way:

• When I paste RTL text - the content is aligned to the right
• When I start typing after RTL text - the content is still aligned to the right which looks a proper way
• When I start typing previous RTL text - content is aligned to the left, looks a proper way

Is it connected to a particular device or Android version? I've tested it on LG Velvet (LM-G900EM), android 13

cc: @NicMendonca @lanitochka17

https://github.com/Expensify/App/assets/7682108/61eca274-b1a7-486b-98dd-660f3e1f9bf0

[barttom]

Here is a mWeb recording https://github.com/Expensify/App/assets/7682108/05466b91-d920-4e5e-bbc0-673b6796101e

[NicMendonca]

bump @lanitochka17 ^^

[lanitochka17]

I am not able to reproduce this issue on Samsung Galaxy A50/Android11

https://github.com/Expensify/App/assets/78819774/7e9a67bb-25f0-4557-a19f-9c931a415f9b

[aimane-chnaif]

Just tested on latest staging. This is still reproducible to me

https://github.com/Expensify/App/assets/96077027/807876eb-0bcb-4583-8f36-85ba6a06fb59

[barttom]

@aimane-chnaif which device did You use to test it?

[aimane-chnaif]

@aimane-chnaif which device did You use to test it?

android chrome (samsung galaxy s10)

[melvin-bot[bot]]

@NicMendonca @stephanieelliott @aimane-chnaif 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]]

@NicMendonca @stephanieelliott @aimane-chnaif 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]]

@NicMendonca @stephanieelliott @aimane-chnaif 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!

[stephanieelliott]

Grabbing this issue back, thanks @NicMendonca!

[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? 💸

[barttom]

Thanks @aimane-chnaif! I suspected that maybe this issue happened only to Samsung devices. However, I've checked that on Samsung s10 lite and still can't reproduce it. I tried pasting RTL text with and without space at beginning - always the same, proper result. Any thoughts on how to reproduce that, every time? Maybe I've missed some details.

[aimane-chnaif]

Please exactly follow this video. So type "مثال test" and select from right to left, not from left to right

[barttom]

still can't reproduce it. I wondering what is the detail that makes this issue happen.

https://github.com/Expensify/App/assets/7682108/e9640040-6ac7-4b39-a547-0bfc45a5cd21

[melvin-bot[bot]]

@stephanieelliott @aimane-chnaif this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[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? 💸

[stephanieelliott]

I can't reproduce this either, it seems like it is happening only in very specific scenarios. Given how edge case it is (must type arabic and english characters, then highlight them), I think we should close this. If you disagree, feel free to reopen and start a discussion.