App
App copied to clipboard
Expensify
[$500] mWeb - Chat - Sometimes the cursor is placed before the emoji
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: 1.4.33.0 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 Expensify/Expensify Issue URL: Issue reported by: Applause - Internal Team Slack conversation:
Action Performed:
- Open a chat
- Type a single emoji to the composer with emoji picker (don't send it)
- Tap away so the composer loses focus
- Tap inside the composer again
- Repeat steps 2-4 until the bug appears
Expected Result:
The cursor should always be after the emoji.
Actual Result:
Sometimes the cursor is placed before the emoji
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
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/78819774/64d148df-03dd-4e6e-bbc6-9600fd500f43
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~0166536b4c825bb51e
- Upwork Job ID: 1752325119743647744
- Last Price Increase: 2024-02-06
Job added to Upwork: https://www.upwork.com/jobs/~0166536b4c825bb51e
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)
I found a more consistent way to reproduce this bug which may not have to do with the emoji picker:
- Type anything, text or emojis.
- Click inside the textarea (not padding).
- Click on the padding of the textarea.
https://github.com/Expensify/App/assets/18640252/87c69137-4227-4253-b304-3372ea1d5f58
This will cause the cursor to jump to the beginning of the textarea, at least on Chrome/MacOS. It seems like this behavior is dictated by the browser. Here are some stackoverflow posts describing the same issue:
https://stackoverflow.com/questions/64874384/how-do-i-avoid-cursor-jump-to-beginning-of-the-input-when-clicking-near-its-edge
https://stackoverflow.com/questions/58732887/clicking-on-the-padding-of-an-input-field-sets-the-cursor-at-the-beginning-of-th
📣 @ayoung19! 📣 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:
- Make sure you've read and understood the contributing guidelines.
- 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.
- 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.
- 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>
Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01b17d36b6311f055a
✅ Contributor details stored successfully. Thank you for contributing to Expensify!
@thesahindia - when you get a chance, can you review the proposal? Thanks!
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
Proposal
Please re-state the problem that we are trying to solve in this issue.
Sometimes when we click into the composer from the end, the caret starts at the beginning
What is the root cause of that problem?
As @ayoung19 identified, it's when the customer presses on the padding instead of the text input. The browser gives a cursor event with start and end of 0, so that's why the cursor goes to the start in this scenario. It's like tabbing into the Composer. This seems common in browsers.
What changes do you think we should make in order to solve the problem?
We have to remove the vertical padding, and add it to the line-height if we want to increase the clickable text input area, with the correct cursor position.
What alternative solutions did you explore? (Optional)
We can use margin instead of padding, and make the area not clickable. forcing them to press the center.
I could implement exact CSS but the goal outcome is to maintain the same layout and either increase the clickable area with the correct cursor position, or to disable the click ability of the padding.
Alternative solutions are to move up the padding to the wrapper of the component, and to increase the height of the input to negate the padding.
@thesahindia - when you get a chance, can you review this new proposal? Thanks!
@alexpensify @thesahindia 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!
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@thesahindia - please keep us posted if you are unable to review and we will find a replacement. Thanks!
@alexpensify, just looked at it again and this isn't a bug but the default browser behaviour so I think we should close this.