Draft message feature not working correctly

If you haven’t already, check out our contributing guidelines for onboarding and email [e-mail] 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)**

https://user-images.githubusercontent.com/31225194/112590102-5aa85180-8da6-11eb-90d4-b3cfe1f1d988.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)

https://user-images.githubusercontent.com/31225194/112589293-f0db7800-8da4-11eb-935a-48ff721c777a.mp4

---

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

https://user-images.githubusercontent.com/31225194/112589862-ed94bc00-8da5-11eb-81b1-d5ce14352df3.mp4

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

[kidroca]

Hey guys since you will make the component re-mount when reportID changes you can also set the autoFocus attribute which would make it focus after it mounts.

<TextInputFocusable
  autoFocus
  multiline
  ref={el => this.textInput = el}
  ...

Then this condition becomes unneeded (E.g. when reportID changes the compose component would remount)

https://github.com/Expensify/Expensify.cash/blob/62b6920c01cdefbc0fb0c258e4b756bcd01fe12a/src/pages/home/report/ReportActionCompose.js#L84

        if (
            (prevProps.modal.isVisible && !this.props.modal.isVisible)
            || (prevProps.reportID !== this.props.reportID) // this won't be needed 
        ) {
            this.setIsFocused(true);
        }

I’ve proposed a similar idea though it was regarding focusing and keyboard issues on mobile

In short: The ReportView (or screen) will re-mount. This in turn means it’s children will remount too and you won’t need to set a key to force a remount

• Why does the ReportView need to unmount?
• To have a smooth transition while we are switching between reports #2154

This can simplify logic like:

  // The first time the component loads the props is empty and the next time it may contain value.
  // If it does let's update this.comment so that it matches the defaultValue that we show in textInput.
  if (this.props.comment && prevProps.comment === '' && prevProps.comment !== this.props.comment) {
      this.comment = this.props.comment;
  }

The parent will first load data (display loading state) and then mount the compose field with a proper initial value.

[iwiznia]

Cool, that makes sense! Go ahead and submit the PR.