Android - Expense - Tapping Create expense button, category and description field greyed out.

[vincdargento]

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.89-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Money Requests

Action Performed:

1. Launch app
2. Open a workspace chat
3. Start creating a split scan expense
4. In the confirmation page, tap split expense and note category and description field
5. Start creating a scan expense
6. In the confirmation page, tap create expense and note category and description field

Expected Result:

Tapping create expense button, category and description field must not be greyed out or both fields should be greyed out for split expense flow also.

Actual Result:

While creating split scan expense, tapping split expense doesn't greys out category and description field but for scan expense it is greyed out.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-24 18:52:43 UTC.

Proposal

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

Android - Expense - Tapping Create expense button, category and description field greyed out.

What is the root cause of that problem?

We set isConfirmed to true in createTransaction

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Lines 412 to 414 in fc199fa

	const createTransaction = useCallback(
	(selectedParticipants: Participant[], locationPermissionGranted = false) => {
	setIsConfirmed(true);

and we disable the menu items when the user has confirmed on the transaction creation

App/src/components/MoneyRequestConfirmationListFooter.tsx

Line 480 in fc199fa

disabled={didConfirm}

this is to disallow the pressing of the menu items after the user has confirmed until the modal is dismissed but as shouldGreyOutWhenDisabled is true by default the menu will appear greyed out when the navigation is slow like in Android case.

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

We are disabling the menu items to prevent clicking of the menu items after the confirmation while the modal is dismissed so there is no need to gray out the menu item on that so we can pass shouldGreyOutWhenDisabled as false. We should apply these change to all menu in MoneyRequestConfirmationListFooter where we passed didConfirm on disabled prop.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A : UI bug

What alternative solutions did you explore? (Optional)

[shubham1206agra]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-25 18:28:40 UTC.

Proposal

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

Android - Expense - Tapping Create expense button, category and description field greyed out.

What is the root cause of that problem?

When we start creating the expense, we set isConfirmed to true in createTransaction function

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 414 in fc199fa

setIsConfirmed(true);

Also, we apply disabled property on the menu items when the didConfirm is true, which is being set using effect

Example of disabled prop-

App/src/components/MoneyRequestConfirmationListFooter.tsx

Line 480 in fc199fa

disabled={didConfirm}

Effect usage-

App/src/components/MoneyRequestConfirmationList.tsx

Lines 477 to 479 in b59f23b

	useEffect(() => {
	setDidConfirm(isConfirmed);
	}, [isConfirmed]);

Now, didConfirm will be true when we start creating the expense, since we set isConfirmed to true in createTransaction function.

Since we use the default properties related to disabled, when didConfirm is true, the menu items will grey out.

Note

The disabled property was added to prevent navigation to edit properties after starting the flow of creating an expense.

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

Instead of using disabled here, we can modify the interactive property of menu item as this will prevent us to use extra props to achieve the same behavior as non-interactive menu item, and it is more suitable to make the menu items non-interactive rather than disabled.

Example of modified interactive prop - interactive={!isReadOnly && !didConfirm}

And we would remove disabled prop completely.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA since this is an UI bug

What alternative solutions did you explore? (Optional)