[VIP-VSB][$500] Chat - Edit mode reopens after sending a message, press Up key and Enter key without delay

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.3.98-3
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:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any chat
3. Send a message
4. Press Up key to edit > Press Enter without delay

Expected Result:

expected result is the message being updated and the edit mode not opening again

Actual Result:

The exit mode reopens

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

Bug6273002_1699751562246.20231112_091028.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb41054c4531b21c
• Upwork Job ID: 1723521696324161536
• Last Price Increase: 2023-11-12

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[Falcowoski]

I can only reproduce the issue after dozens of attempts. Is this to be expected? From the attached video, it seemed to be a more common occurrence.

[melvin-bot]

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

[Falcowoski]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0188a784bf7e6e55b1

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[favourch]

Hi Team,

I've conducted tests to replicate the issue based on the steps provided:

1. Navigated to staging.new.expensify.com.
2. Opened a chat conversation.
3. Sent a message.
4. Pressed the Up key to enter edit mode and then pressed Enter immediately.

In my tests, I found that the edit mode exits as expected upon pressing Enter without delay. My testing was conducted on the MacOS: Chrome browser.

Please let me know if there are additional steps or conditions I should consider.

[melvin-bot]

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

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[favourch]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/favourch

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[favourch]

Hi Team,

I've conducted tests to replicate the issue based on the steps provided:

1. Navigated to staging.new.expensify.com.
2. Opened a chat conversation.
3. Sent a message.
4. Pressed the Up key to enter edit mode and then pressed Enter immediately.

In my tests, I found that the edit mode exits as expected upon pressing Enter without delay. My testing was conducted on the MacOS: Chrome browser.

Please let me know if there are additional steps or conditions I should consider.

[Falcowoski]

Proposal

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

When editing a message in a short space of time, the editing mode is exited as expected, but unwantedly, it is started again without any interaction on the part of the user. In addition, the text displayed is not the newly edited text, but the original text.

What is the root cause of that problem?

The root cause of the problem is the invocation of the debouncedSaveDraft function that occurs in the mount of the ReportActionItemMessageEdit component.

To be exact, there is a problem before that. In my opinion, there is no need to invoke the above function when mounting the component, because we are already setting the initial value of the "state" draft even before the component is mounted, i.e. in normal situations, this extra value setting is "unnecessary".

Of course, I'm aware that the updateDraft function, which is responsible for invoking debouncedSaveDraft when the component is mounted, does other things besides setting the value of draft, but at least this particular part is unnecessary, because it's duplicated.

Returning to the root cause, it's very complicated to replicate the error in most cases, because we need to get the "timing" right!

We must edit the message and save it before the debouncedSaveDraft callback is triggered for the error to happen.

In addition to all this, it seems that the debouncedSaveDraft.cancel method invoked in deleteDraft is not working as it should, or at least not in this specific case, because it is being invoked and yet the debouncedSaveDraft callback is executing immediately afterwards.

flowchart TB
    A[Send message] --> B[Open edit mode with Up key]
    B -->|handleKeyDown| C[Invoke `saveReportActionDraft`]
    C -->|Set `draftMessage` value to last message| D[Mount `ReportActionItemMessageEdit`]
    D --> E[Run `preferredLocale` useEffect]
    E --> F[Invoke `updateDraft`]
    F -->|User add a new character| G[Invoke `triggerSaveOrCancel`]
    G -->|User press Enter key| H[Invoke `triggerSaveOrCancel` again]
    H --> I[Invoke `publishDraft`]
    I --> J[Invoke `editReportComment`]
    J --> K[Invoke `deleteDraft`]
    K -->|Set `draftMessage` value to empty string| L[Unmount `ReportActionItemMessageEdit`]
    L --> M[Close edit mode]
    M -->|`updateDraft` execute debounced callback| N[Set `draftMessage` to last original message]
    N -->|Mount `ReportActionItemMessageEdit`| O[Open edit mode]

Loading

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

A. Skip "setState" when it is first rendered

Prevent the invocation of debouncedSaveDraft when assembling the ReportActionItemMessageEdit component with a conditional, controlled by a variable isFirstRenderRef.current, created by useRef.

I accept ideas for other ways to "validate" whether or not we're at the first rendering!

We won't have any problems with the button opening the edit mode, as it also has a "setDraft" before the component is mounted, via onPress.

What alternative solutions did you explore?

B. Fix cancel method

Understand why the debouncedSaveDraft.cancel method is not working as it should and fix it, so that the callback invocation is canceled.

C. "New" cancel method

Add another way to cancel the execution of the callback. So far, in this option, the only information I have is the place where we should cancel the execution, which is inside the deleteDraft method.

D. Replace debounced invocation

Replace debouncedSaveDraft with saveDraft, without the debounce feature in language useEffect, i.e. create a new updateDraft method, but without the debounce feature.

[Falcowoski]

Proposal

Updated

[ericuldall]

Proposal

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

When quickly editing, then hitting enter in a previous chat message, the edit dialog is re-opening and saved changes are lost

What is the root cause of that problem?

The root cause is that debouncedSaveDraft is being called at mount, as well as, anytime the text is edited and if you save before the debounce timeout is done a draft is saved with the last drafted value and the edit input is opened again (since now there's a saved draft).

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

We need to make sure to always cancel our previous debounced handlers before we call them again. In some scenarios it may be okay to let debounces stack, but in this case it's causing a race condition.

Note

My apologies for not originally using the proposal template, and also for preemptively posting a PR. It's my first day attempting to contribute to this lovely code base and there was lots to learn in the docs.

[melvin-bot]

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

[ericuldall]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~016428356daca87699

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[allroundexperts]

Thanks for your elaborate proposal @Falcowoski. It seems like to me that the real reason why this is not working is that the cancel method is broken. Do you mind explaining what's wrong with it and how we can fix it?

[Falcowoski]

Thanks for your elaborate proposal @Falcowoski. It seems like to me that the real reason why this is not working is that the cancel method is broken. Do you mind explaining what's wrong with it and how we can fix it?

Hi, @allroundexperts!

I do some extensive searches in this subject and sincerely, to me, is the most common issue possible: The function reference was changed/updated and the cancel calls is not cancelling the right/last function.

I'm aware that we are wrapping the debounced function in a useMemo hook, but it is difficult for me to think of other causes.

I was thinking in focus in the deleteDraft dependencies and the own debouncedSaveDraft dependencies to find the issue.

What do you think?

debouncedSaveDraft

• props.reportID
• props.action

deleteDraft

The debouncedSaveDraft.cancel function is called in this method.

• props.action.message
• debouncedSaveDraft
• debouncedUpdateFrequentlyUsedEmojis
• props.preferredSkinTone
• preferredLocale

[JmillsExpensify]

Still working through proposals

[Christinadobrzyn]

I'm back from ooo - Let us know if there are any updates on the proposal review @allroundexperts!

[Christinadobrzyn]

@allroundexperts can you let us know if any of these proposals look good? Thanks!

[Christinadobrzyn]

DMd @allroundexperts and they are reviewing the proposals

[allroundexperts]

Just tested this again on latest main and I am not able to reproduce this any longer. @Falcowoski Can you confirm if this is still happening for you?

[Christinadobrzyn]

Just re-tested this too and I think it's resolved also. It seems like when you click the up-arrow the previous message is reopened to be edited and when you press enter the message closes. I think this is working as expected.

@Falcowoski how does it look for you?

[Falcowoski]

Sorry for the delay!

I just tested it a few times and unfortunately I replicated the issue, which is the editing menu opening automatically.

I tested in new.expensify.com

[Christinadobrzyn]

Ah so the OP is wrong - it should be the following - is this correct @Falcowoski?

Expected Result:

The text can't be edited

Actual Result:

The text is reopening to edit mode

[Falcowoski]

Hmmmm, in my opinion, the expected result is the message being updated and the edit mode not opening again, like in the OP

Today, the edit mode opens again when updating the message very quick.

Maybe I didn't understand the question well. Sorry

[Christinadobrzyn]

Awesome, that does help @Falcowoski! Thanks!

[Christinadobrzyn]

@allroundexperts were you able to test this based on the updated steps in the OP? I think this might be part of the vip-vsb project so asking the team for their thoughts - https://expensify.slack.com/archives/C066HJM2CAZ/p1703028537544869

[Christinadobrzyn]

I think we can move forward with reviewing proposals @allroundexperts!

[melvin-bot]

@allroundexperts, @Christinadobrzyn Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@allroundexperts, @Christinadobrzyn Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@allroundexperts, @Christinadobrzyn 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[Christinadobrzyn]

hi @allroundexperts can you provide an update on this?

[allroundexperts]

Hi @Christinadobrzyn!
I'm still not able to reproduce this. Can you please update the video according to the new OP steps?

[Christinadobrzyn]

I can't reproduce this either, I'm not sure if this is resolved but I also think it might be a low priority anyway. I think we should just close this for the time being as it's difficult to understand what the issue actually is.

[lanitochka17]

Issue is still reproducible on the latest build 1.4.26-1

bandicam.2024-01-17.22-45-35-936.mp4

[quinthar]

yes this feels too esoteric for right now, closing.