[HOLD for payment 2023-10-12] [$500] DEV: Web - Draft icon show even there is not any thing in input field

[kbecciv]

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

---

Action Performed:

1. Go to top most thread in LHN
2. Write something
3. Then go to second most thread in LHN
4. Here also write something
5. Then select all and erase that text
6. Then go to remaining draft message and erase all text from input field

Expected Result:

Draft icon not shows if not have any text in input field

Actual Result:

Draft icon is shows even input field is empty

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.57-5.
Reproducible in staging?: no
Reproducible in production?: no
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-28.at.10.40.07.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @niravkakadiya25
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693199645599589

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e6da2ca5e140fdb7
• Upwork Job ID: 1701973572762148864
• Last Price Increase: 2023-09-27
• Automatic offers:
• abdulrahuman5196 | Reviewer | 26975471
• DylanDylann | Contributor | 26975480
• niravkakadiya25 | Reporter | 26975482

[DylanDylann]

Proposal

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

• Draft icon show even there is not any thing in input field

What is the root cause of that problem?

• Report.setReportWithDraft(reportID, true) is called but the empty text is saved that leads to the bug "Draft icon show even there is not anything in the input field". But why is empty text saved? It will be shown bellow:
• Currently, we are using the debounce function to save the draft comment:
  

  App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

  Lines 206 to 210 in 1223e1e

  	if (shouldDebounceSaveComment) {
  	debouncedSaveReportComment(reportID, newComment);
  	} else {
  	Report.saveReportComment(reportID, newComment || '');
  	}

• The debouncedSaveReportComment function is defined as below:

const debouncedSaveReportComment = _.debounce((reportID, comment) => {
    Report.saveReportComment(reportID, comment || '');
}, 1000);

• Because all the reports share the same debounce function above - debouncedSaveReportComment, so when the user opens chat report A and types any message then quickly switches to report B and types any messages, the debouncedSaveReportComment will ignore all the calls made within that 1000ms (contains the call that made in report A). It leads to the empty draft message being saved with report A.

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

• We can create the new debouncedSaveReportComment that is used separately for each chat report and replace the debounce function mentioned in the root cause part by it:

    const saveReportComment = useCallback((reportID, newComment) => {
        Report.saveReportComment(reportID, newComment || '');
    }, []);

    const debounceSaveReportComment = useCallback(
        _.debounce((reportID, newComment) => {
            saveReportComment(reportID, newComment);
        }, 1000),
        [saveReportComment],
    );

What alternative solutions did you explore? (Optional)

• NA

Result

Screencast.from.06-09-2023.16.48.47.webm

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e6da2ca5e140fdb7

[melvin-bot]

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

[melvin-bot]

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

[kadiealexander]

Not overdue, please get your proposals in 📢

[needpower]

Proposal

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

In LHN, a draft icon shows when there is no text in the input field.

What is the root cause of that problem?

The ComposerWithSuggestions component, which is responsible for input text handling, saves a draft of input text with one second debounce:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

Lines 206 to 207 in e2a1343

	if (shouldDebounceSaveComment) {
	debouncedSaveReportComment(reportID, newComment);

App/src/libs/ComposerUtils/debouncedSaveReportComment.js

Lines 9 to 11 in 8000576

	const debouncedSaveReportComment = _.debounce((reportID, comment) => {
	Report.saveReportComment(reportID, comment || '');
	}, 1000);

The problem occurs when a user types in a message in one report chat, switches to another report and enters another message within one second. The new debounced function call happens, and the previous call becomes overridden, but a report menu item in LHN displays that it was edited.

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

Move the debounced comment save function on the component level. So, every report will have it's own instance of that function. We need to do it in ReportActionCompose (parent component) because it has some use cases with canceling the debounce:

// ReportActionCompose.js
const debouncedSaveReportComment = useMemo(function () {
  return _.debounce((reportID, comment) => {
    Report.saveReportComment(reportID, comment || '');
      }, 5000);
   }, []);
    ...
 <ComposerWithSuggestions
   ...
   debouncedSaveReportComment={debouncedSaveReportComment} // new property
 />

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸