Draft message feature not working correctly

[stephanieelliott]

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:

Drafted message text should constrained to the user selected when the text was entered into the compose box, draft icon should show only when text exists in the compose box.

Actual Result:

After drafting message text in the compose box for (but prior to sending), text continues to show after clicking into another chat, draft icon continues to show when text does not exist in the compose box.

Action Performed:

Issue 1:

After drafting message text in the compose box for (but prior to sending), text continues to show after clicking into another chat (2 users)

1. Open a chat with User A
2. Enter text into the compose box (but do not send)
3. Switch to chat with User B
4. Notice: Message drafted in compose box to User A continues to show in compose box in chat with User B

Issue 2:

After drafting message text in the compose box for (but prior to sending), text continues to show after clicking into another chat (3 users)

1. Open a chat with User A
2. Enter text into the compose box (but do not send)
3. Switch to chat with User B
4. Switch to a chat with User C
5. Notice: Message drafted in compose box to User A continues to show in compose box in chat with User C

Issue 3:

Draft icon continues to show when text does not exist in the compose box

1. Open a chat with User A
2. Enter text into the compose box (but do not send), wait 3-5 seconds
3. Switch to chat with User B
4. Go back to chat with User A, delete the text drafted in compose box
5. Switch to chat with User C
6. Notice: Draft icon continues to show next to User A even though you deleted the text in the compose box

Workaround:

N/A

Platform:

Desktop app v1.0.6-0

Notes/Photos/Videos:

Issue 1: After drafting message text in the compose box for (but prior to sending), text continues to show after clicking into another chat (2 users)**

Issue.No.1.repro.mp4

Issue 2: After drafting message text in the compose box for (but prior to sending), text continues to show after clicking into another chat (3 users)

Issue.No.3.mp4

---

**
Draft icon continues to show when text does not exist in the compose box

Issue.3.repro.mp4

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

[stephanieelliott]

View this job on Upwork: https://www.upwork.com/jobs/~0129016d527b7dd243

[0xthierry]

I'm looking for the codebase and I saw that the we have a problem of "synchronization" with the Onyx state.

We have a value in the state of Onyx and other in the TextInputFocusable.

render () reportId: 71623989 with value: thierry
render () reportId: 71623940 with value: concierge

So the idea is to fix this difference between the states.

If you all want I could explain better and discuss about the implementation :)

Proposal in upwork: https://www.upwork.com/ab/proposals/1375448538180206593

@iwiznia @stephanieelliott 💯

[kaushiktd]

Hi,

This is Kaushik here and this is my technical explanation for this issue.

1. when the user types a text message to send but actually not press to send and choose another person, in the meantime, we need to clear the text input value and remain this value for the user whom we want to send.
2. when work on the first issue second will auto resolved.
3. we need to check in existing code if the draft message is existing or not, if not then remove the draft icon.

[iwiznia]

@Thierrysantos how exactly would you fix this difference between the states?

@kaushiktd can you add more details to your proposal, like where in the code you would make the changes and what would those changes be?

In general, we are looking for a more detailed description on the bug and the fix before picking a proposal.

[0xthierry]

@iwiznia

Just to give a feedback for you, I know the problem but I'm thinking in a solution. 🤔

But basically the TextInputFocusable is an uncontrolled input, so when we change the context (reportID) this component have their own value and don't receive the new value from the switch between reportID.

And the change doesn't occur because we sent the value in the defaultValue property and when we change the context(reportID) this input alredy have a value, so defaultValue isn't used as a initial value to value property.

That's okay you all hiring other developer but I will continue here to think in how to fix it.

[0xthierry]

@iwiznia I find a solution to this problem(TextInput and draft icon).

Basically when change the context, we could re-render(with key property) the component(ReportActionCompose) and it will solve this problems.

Because it will use the value from onyx as defaultValue in TextInputFocusable.

Fixing this synchronization between states, we already fix the draft icon.

I already have a code implemented, could I open the PR? 😃 💯

screen-recorder-mon-mar-29-2021-00-22-42.mp4

[iwiznia]

(with key property)

To clarify, what would the key be? The reportID you are looking at?

Because it will use the value from onyx as defaultValue in TextInputFocusable.

Which value exactly? The one saved in ${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}?

[0xthierry]

Would be like <ReportActionCompose key={this.props.reportID} /> this value come from ONYXKEYS.CURRENTLY_VIEWED_REPORTID.

[iwiznia]

Cool, that's what I thought. How about the other question?

Which value exactly? The one saved in ${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}?

[0xthierry]

Which value exactly? The one saved in ${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}?

No, the value saved in ${ONYXKEYS.CURRENTLY_VIEWED_REPORTID}.

[iwiznia]

Huh? The value of the text input would be the reportID? I don't think that's correct, should be the draft comment of that reportID (if there's any)

[0xthierry]

Oh sorry, I got it wrong what you asked 😂

The value is the draft from the comment of that reportID.

Yeah

The one saved in ${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}?

Yeah

// ReportActionCompose.js
comment: {
      key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
  },