If you edit a recently sent DM by pressing up on keyboard or hovering > edit comment, the focus is on the beginning of the message

[isagoico]

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

---

Expected Result:

Focus should be on the end of the message

Actual Result:

Focus is on the beginning of the message.

Action Performed:

1. Navigate to a conversation in e.cash
2. Hover over an owned message and click on the edit comment option in the menu
   or
3. Tap up arrow key to edit the previous comment.
4. See the focus is set to the beginning of the message (it should be the end though)

Workaround:

Users can manually set the focus where it's needed.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App ✔️
Mobile Web

Version Number: 1.0.62-0 (1.0.62-0)

Notes/Photos/Videos:
Important note: If you right click and use the edit comment option it does not have the same behaviour. To get this behaviour you have to use the hover action menu. Right-click has another issue here

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/166576

Upwork Job URL https://www.upwork.com/jobs/~0107b705b762cb168d

View all open jobs on Upwork

---

From @aliabbasmalik8 https://expensify.slack.com/archives/C01GTK53T8Q/p1622188890359100

On Edit Comment, Cursor position at the start of comment

[MelvinBot]

Triggered auto assignment to @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[tylerkaraszewski]

Confirmed this in the mac desktop client. If the reproduction steps are unclear, all you need to do is click the "pencil" icon over a message you sent to edit it.

[mallenexpensify]

Taking a leap of faith this can be worked on by a contributor and assigning the External label. Also added steps in OP to address the issue of the 'up arrow to edit' placing the cursor at the beginning of the previous message

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dklymenk]

I'll assume it's just a matter of time until the upwork job is posted, so I'll proceed to write my proposal.

From my prior experience I can tell that for this kind of task one would normally use TextInput's selection prop. As it is mentioned in the docs, you can supply same values for start and end and it will put the cursor at that position with no selection. Now this next part is not documented there, but if you supply -1 as value for both start and end, it will put the cursor at the end of the TextInput.

So solution should be as simple as adding

selection={{start: -1, end: -1}}

to list of props passed here
https://github.com/Expensify/Expensify.cash/blob/79285540d4e365ddc3fa2c1994c91660cd529eb7/src/pages/home/report/ReportActionItemMessageEdit.js#L100-L112

[dklymenk]

Did a quick test and it seems to work as one might expect with both "press pencil - " and "press up arrow - " to edit cases, since the same component is used for both.

2021-06-04.19-04-16.mp4

[aliabbasmalik8]

PROPOSAL
We can fix this by adding selection state and onSelectionChange function in this component
https://github.com/Expensify/Expensify.cash/blob/0622b3de834b0f936856f960e73eec2cdbf42a5e/src/pages/home/report/ReportActionItemMessageEdit.js#L31

selection: {
    start: this.props.draftMessage.length,
    end: this.props.draftMessage.length,
},

onSelectionChange(e) {
    const selection = e.nativeEvent.selection;
    this.setState({ selection });
}

and pass in this component
https://github.com/Expensify/Expensify.cash/blob/0622b3de834b0f936856f960e73eec2cdbf42a5e/src/pages/home/report/ReportActionItemMessageEdit.js#L100

selection={this.state.selection}
onSelectionChange={this.onSelectionChange}

Thanks

NOTE: I added selection state because I need to show correct cursor point on add emoji( there was an issue on safari browser on add emoji)

[dklymenk]

Yeah, hats off to you, @aliabbasmalik8 .

I've just checked and the -1 trick doesn't seem to work on safari at all...

[michaelhaxhiu]

Posting this job shortly! Please hang tight and a member of our engineering team will help with next steps in terms of vetting the proposals.

[MelvinBot]

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[michaelhaxhiu]

hey @deetergp - quick update:

• @aliabbasmalik8 and @dklymenk both provided a proposal before I had a chance to post to Upwork (they were quick ⚡ which is awesome 🤩 ).
• They jointly agree that @aliabbasmalik8 solution is the better route.
• The job is now posted, so we can proceed with examining the proposal(s) like usual.

@aliabbasmalik8 - can you please apply for the job on upwork here?

[parasharrajat]

@aliabbasmalik8
Just a heads up. that we don't need to update the state on onSelectionChange event. Instead, just set the property on the Class and use it. It will work the same.

onSelectionChange(e) {
    this.selection = e.nativeEvent.selection;
}

[michaelhaxhiu]

Payment will be sent in 7 days to allow for regressions to surface and be fixed.

[michaelhaxhiu]

Payment sent.