[$500] mWeb/Safari - Chat - Cursor isn't seen in the input field when triggering edit mode

[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.4.25-1
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:

Issue found when executing PR #33365

Action Performed:

Scenario 1:

1. Navigate to staging.new.expensify.com ? log in
2. Navigate to any chat
3. Send a message and start a thread
4. Send additional messages
5. Long tap on a message within the thread
6. Select "Edit comment"

Scenario 2:

1. Navigate to staging.new.expensify.com > log in
2. Navigate to any chat
3. Send a message
4. Long tap on the sent message
5. Select "Edit comment"

Expected Result:

Cursor should be visible in the input field as soon as edit mode is triggered

Actual Result:

Cursor isn't seen in the input field when triggering edit mode

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

Bug6343108_1705334299103.Input_fied_with_no_cursor.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01732e019ea63f840f
• Upwork Job ID: 1746932216922673152
• Last Price Increase: 2024-01-22

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[twisterdotcom]

Downgrading to Weekly as not that important. It'll be good to fix though.

[allgandalf]

Proposal

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

Cursor isn't seen in the input field when triggering edit mode in mobile web browser (Android as well as iOS).

What is the root cause of that problem?

In Composer The default value of autofocus prop is set to false:

App/src/components/Composer/index.tsx

Lines 49 to 57 in a4e3ae2

	function Composer(
	{
	value,
	defaultValue,
	maxLines = -1,
	onKeyPress = () => {},
	style,
	shouldClear = false,
	autoFocus = false,

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

In order to override the default behavior, we simply need to pass the prop autofocus=true in ReportActionItemMessageEdit
(This is where the component is called to edit messages)

<Composer
     autoFocus = {true}, 

This will set the default behavior in Native android, iOS and web to autofocus on input field when user triggers edit mode

What alternative solutions did you explore? (Optional)

N/A