[Due for payment 2025-08-13] [$250] Status - The Clear after row flickers after clicking the Save button

@Christinadobrzyn

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.1.71-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: Mac 15.4.1/ Desktop, Chrome, mWeb/Safari
App Component: User Settings

Action Performed:

Navigate to https://staging.new.expensify.com
Navigate to Account settings > Profile
3.Click on Status
4.Click on the emoji selector
Select an emoji
6.Set the "Clear after" to any option
Click the Save button

Expected Result:

After clicking the save button, the "Clear after" row doesn't flicker

Actual Result:

The Clear after row flickers after clicking the Save button

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6868987_1750809465001.Recording__222__2_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021939816803115817068
Upwork Job ID: 1939816803115817068
Last Price Increase: 2025-07-07
Automatic offers:

daledah | Contributor | 107992957

Issue Owner

Current Issue Owner: @Christinadobrzyn

@Christinadobrzyn

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

Proposal

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

The Clear after row flickers after clicking the Save button

What is the root cause of that problem?

When saving custom status, we call both updateCustomStatus and clearDraftCustomStatus at the same time

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 114 to 119 in 014edee

    
           updateCustomStatus({ 
        
               text: statusText, 
        
               emojiCode: !emojiCode && statusText ? initialEmoji : emojiCode, 
        
               clearAfter: clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER ? clearAfterTime : '', 
        
           }); 
        
           clearDraftCustomStatus();

Which leads to a race condition: for a very short amount of time draftClearAfter here

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 59 in 014edee

const draftClearAfter = draftStatus?.clearAfter;

and currentUserClearAfter here

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 56 in 014edee

    
           const currentUserClearAfter = currentUserPersonalDetails?.status?.clearAfter ?? '';

is both empty string.

Which leads to DateUtils.getLocalizedTimePeriodDescription(dataToShow) returns never

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 67 to 68 in 014edee

    
           const dataToShow = draftClearAfter || currentUserClearAfter; 
        
           return DateUtils.getLocalizedTimePeriodDescription(dataToShow);

App/src/libs/DateUtils.ts

Lines 543 to 544 in 014edee

    
           case '': 
        
               return translateLocal('statusPage.timePeriods.never');

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

We should move clearDraftCustomStatus to InteractionManager.runAfterInteractions

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 119 to 122 in 014edee

    
           clearDraftCustomStatus(); 
        
           navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => { 
        
               navigateBackToPreviousScreen(); 
        
           });

    navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
        clearDraftCustomStatus();
        navigateBackToPreviousScreen();
    });

Or we can move the function clearDraftCustomStatus into navigateBackToPreviousScreen

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

None

What alternative solutions did you explore? (Optional)

Or we can remove clearDraftCustomStatus function here because it was cleared when umount

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 146 to 155 in 014edee

    
           useEffect(() => { 
        
               if (!currentUserEmojiCode && !currentUserClearAfter && !draftClearAfter) { 
        
                   updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()}); 
        
               } else { 
        
                   updateDraftCustomStatus({clearAfter: currentUserClearAfter}); 
        
               } 
        
               return () => clearDraftCustomStatus(); 
        
               // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps 
        
           }, []);

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

@Christinadobrzyn

@Christinadobrzyn Huh... This is 4 days overdue. Who can take care of this?

@Christinadobrzyn

@Christinadobrzyn Huh... This is 4 days overdue. Who can take care of this?

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

@hoangzinh

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

Reviewing label has been removed, please complete the "BugZero Checklist".

@hoangzinh

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.89-21 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: clear after row flickers #66013

If no regressions arise, payment will be issued on 2025-08-13. 🎊

For reference, here are some details about the assignees on this issue:

@hoangzinh requires $250 payment through NewDot Manual Requests
@daledah requires $250 payment automatic offer (Contributor) PAID

@hoangzinh

@hoangzinh @Christinadobrzyn The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

Payment coming up soon!

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: https://github.com/Expensify/App/pull/24620/files#r2268275870
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

I don't think we need a regression test for this bug, it's small UX issue.

@hoangzinh

Thanks @hoangzinh!

Payment summary here - #64873 (comment)

@hoangzinh please request payment through ND. TY!

@Christinadobrzyn

Thanks @Christinadobrzyn. I requested in ND

@hoangzinh

@hoangzinh has submitted payment for this report on ND here.

SO: https://stackoverflowteams.com/c/expensify/questions/7582

Vendor found in VML: True. Status: Active
Amount requested: $250.00. [Due for payment 2025-08-13] [$250] Status - The Clear after row flickers after clicking the Save button #64873 (comment).
I, @twisterdotcom am not already the BZ assignee. I have approved this payment.

Zapier Logs

Run ID: 00040eee-2c94-a6b7-b080-6ebe41c33b91

Navigation Menu

Repository navigation

[Due for payment 2025-08-13] [$250] Status - The Clear after row flickers after clicking the Save button #64873

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

34 remaining items

BugZero Checklist:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	updateCustomStatus({
	text: statusText,
	emojiCode: !emojiCode && statusText ? initialEmoji : emojiCode,
	clearAfter: clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER ? clearAfterTime : '',
	});
	clearDraftCustomStatus();

	const dataToShow = draftClearAfter \|\| currentUserClearAfter;
	return DateUtils.getLocalizedTimePeriodDescription(dataToShow);

	case '':
	return translateLocal('statusPage.timePeriods.never');

	clearDraftCustomStatus();
	navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

	useEffect(() => {
	if (!currentUserEmojiCode && !currentUserClearAfter && !draftClearAfter) {
	updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()});
	} else {
	updateDraftCustomStatus({clearAfter: currentUserClearAfter});
	}

	return () => clearDraftCustomStatus();
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

[Due for payment 2025-08-13] [$250] Status - The Clear after row flickers after clicking the Save button #64873

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jun 25, 2025

daledah commented on Jun 25, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Jun 30, 2025

melvin-bot commented on Jun 30, 2025

melvin-bot commented on Jun 30, 2025

melvin-bot commented on Jun 30, 2025

34 remaining items

melvin-bot commented on Aug 6, 2025

melvin-bot commented on Aug 6, 2025

melvin-bot commented on Aug 6, 2025

Christinadobrzyn commented on Aug 11, 2025

hoangzinh commented on Aug 12, 2025

BugZero Checklist:

Christinadobrzyn commented on Aug 13, 2025

hoangzinh commented on Aug 13, 2025

twisterdotcom commented on Aug 14, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions