search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.46k stars 2.81k forks source link

Assign task - Inconsistent Button Behavior Between Submit and Assign Task After Navigating via URL #50577

Open IuliiaHerets opened 2 hours ago

IuliiaHerets commented 2 hours ago

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

Version Number: v9.0.47-1 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): applausetester+tw435353535333@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

  1. Go to Settings > Create Workspace.
  2. In Workspace Chat, click the plus sign.
  3. Select "Submit Expense," add a merchant, and copy the URL.
  4. Open the copied URL in a new tab, return to the previous tab, and submit the expense.
  5. Go back to the new tab and notice the Submit button is disabled.
  6. In Workspace Chat, click the plus sign again and select "Assign Tasks."
  7. Add a title, copy the URL, and open it in a new tab.
  8. Return to the previous tab, click Confirm Task, and return to the new tab.
  9. Notice that the Confirm button is not disabled, but clicking it shows an incorrect error saying "Add title and share" even though both fields are filled.

Expected Result:

After navigating between pages using URLs, both the Submit and Confirm buttons should behave consistently—either both should be disabled after actions or display correct error messages.

Actual Result:

The Submit button is disabled as expected, but the Confirm button displays an incorrect error message, causing inconsistency.

Workaround:

Unknown

Platforms:

Screenshots/Videos

https://github.com/user-attachments/assets/9f5546e9-0d9e-4214-abab-62878d837ed0

View all open jobs on GitHub

melvin-bot[bot] commented 2 hours ago

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

IuliiaHerets commented 2 hours ago

@zanyrenney FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

NJ-2020 commented 1 hour ago

Edited by proposal-police: This proposal was edited at 2024-10-10 14:47:50 UTC.

Proposal

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

Assign task - Inconsistent Button Behavior Between Submit and Assign Task After Navigating via URL

What is the root cause of that problem?

After the first tab confirm the task the ONYXKEYS.TASK value become undefined and then when we click the confirm button on the second tab we got an error message saying: Please enter a title and select a share destination.

That is because when we click the confirm button it invoke this function and checking if the task?.title is not empty, since the task value is undefined so it return above error message https://github.com/Expensify/App/blob/da700c58687cb9fc79ed5ad6b4ff454c19a5002b/src/pages/tasks/NewTaskPage.tsx#L117-L121

And why we still kept seeing the title value in the title input, because when we open the page we set the useState title value to task.title inside this useEffect https://github.com/Expensify/App/blob/da700c58687cb9fc79ed5ad6b4ff454c19a5002b/src/pages/tasks/NewTaskPage.tsx#L104-L107 But when the task value becomes undefined the useEffect hook will be triggered since the task?.title value changed, but it do not remove the value from the title input because it will update the useState if the task?.title is not undefined https://github.com/Expensify/App/blob/da700c58687cb9fc79ed5ad6b4ff454c19a5002b/src/pages/tasks/NewTaskPage.tsx#L104-L107

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

We can remove the if condition inside the useEffect

...
setTitle(task?.title ?? '');

We can do the same for description and assignee

Result

https://github.com/user-attachments/assets/0e89786d-9ed8-4edc-9341-e937657ee84c

What alternative solutions did you explore? (Optional)