Fix: useDocumentTitle uses focus events instead of mount lifecycle by MelvinBot · Pull Request #83586 · Expensify/App

MelvinBot · 2026-02-26T14:42:14Z

Explanation of Change

The useDocumentTitle hook was using useEffect to set the browser tab title, relying on component unmount for cleanup. Since Settings screens use persistentScreens (which sets dontDetachScreen: true), ProfilePage never unmounts when navigating to other tabs like Workspaces or Inbox. This caused the browser tab title to remain stuck as "Settings - Profile".

This PR switches useDocumentTitle from useEffect to useFocusEffect, so the title is set when the screen gains focus and cleared when it loses focus. This correctly handles persistent screens that stay mounted but lose focus when navigating away.

Fixed Issues

$ #83582
PROPOSAL: #83582 (comment)

Tests

Go to staging.new.expensify.com
Log in or create a new account and complete onboarding
Navigate to Settings tab
Verify the browser tab title shows "Settings - Profile"
Navigate to Workspaces tab
Verify the browser tab title resets to "New Expensify"
Navigate to Inbox tab
Verify the browser tab title shows "New Expensify"
Navigate back to Settings tab
Verify the browser tab title shows "Settings - Profile" again

Verify that no errors appear in the JS console

Offline tests

This change only affects the browser tab title on web, which is purely a client-side DOM operation. No network dependency.

QA Steps

Go to staging.new.expensify.com
Create a new account and complete onboarding
Navigate to Settings tab — verify tab title is "Settings - Profile"
Navigate to Workspaces tab — verify tab title resets to "New Expensify"
Navigate to Inbox tab — verify tab title shows "New Expensify"
Navigate back to Settings > Profile — verify tab title shows "Settings - Profile"
Navigate to other Settings sub-pages (Preferences, Security, etc.) and verify their titles show correctly
Navigate away from Settings and verify the title resets each time

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

N/A — useDocumentTitle is a web-only hook (document.title is a web API)

Android: mWeb Chrome

N/A — useDocumentTitle is a web-only hook

iOS: Native

N/A — useDocumentTitle is a web-only hook

iOS: mWeb Safari

N/A — useDocumentTitle is a web-only hook

MacOS: Chrome / Safari

N/A — Screenshots to be added by reviewer during testing

The useDocumentTitle hook was using useEffect to set the browser tab title, which relies on component unmount for cleanup. Since Settings screens are persistent (dontDetachScreen), ProfilePage never unmounts when navigating to other tabs, causing the title to stay stuck as "Settings - Profile". Switch to useFocusEffect so the title is set when the screen gains focus and cleared when it loses focus, correctly handling persistent screens. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot · 2026-02-26T14:47:02Z

The verifySignedCommits failure is not related to this PR — it's a transient GitHub API network timeout.

Analysis: The CI runner failed to connect to api.github.com with connect ETIMEDOUT 140.82.112.6:443 while trying to fetch the PR commits list. The commit itself (0d9975d) is properly SSH-signed.

Evidence: The error is a network connectivity issue in the CI environment, not a commit signing problem. All other checks (ESLint, typecheck, Prettier, builds, etc.) passed successfully.

Resolution: Re-running the verifySignedCommits workflow should resolve this. I don't have permission to trigger a re-run — could someone with access please re-run the failed check?

aimane-chnaif

@MelvinBot mark as ready for review. Thanks for the quick fix

aimane-chnaif · 2026-02-26T14:47:35Z

src/hooks/useDocumentTitle.ts

+        useCallback(() => {
+            setPageTitle(title);

-        // Reset to default title when component unmounts


@MelvinBot Keep this comment

melvin-bot · 2026-02-26T14:50:59Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

MelvinBot · 2026-02-26T14:51:01Z

PR has been marked as ready for review! 🎉

Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

melvin-bot · 2026-02-26T14:51:37Z

@cead22 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

MelvinBot · 2026-02-26T14:51:48Z

Two checks were failing:

verifySignedCommits — This was a transient GitHub API 500 error, not an actual commit signing issue. The commit is properly signed with an SSH signature. I pushed an empty commit to retrigger CI.
checklist (reviewer checklist) — This fails because no reviewer checklist has been posted yet. This is expected for a new PR and is not actionable — it will resolve once a reviewer posts their checklist.

aimane-chnaif

@MelvinBot your change reintroduces original bug.
Title doesn't get updated while switching sub tabs in Account settings page

Screen.Recording.2026-02-26.at.2.51.13.pm.mov

MelvinBot · 2026-02-26T14:52:37Z

I have failed to help you. I let you down and for that I am sorry. Please try again later. This may be due to a Claude outage (check here).

Failure details: https://github.com/Expensify/Expensify/actions/runs/22447168380

MelvinBot · 2026-02-26T15:02:34Z

I analyzed all checks on this PR. Here's the status:

Previously failing (now fixed):

Verify signed commits — failed on the first push due to a GitHub API 500 error (not a signing issue). The re-run passed successfully.

Currently failing:

PR Reviewer Checklist — this is not a code failure. It fails until a reviewer completes the reviewer checklist, which is expected for PRs pending review.

All code checks are passing:

ESLint ✅
TypeScript ✅
Prettier ✅
Jest tests (all 8 jobs) ✅
Storybook tests ✅
Perf tests ✅
Spellcheck ✅
Unused styles ✅
Signed commits ✅
Snyk security/license ✅
Translation dry run ✅
Changed files ESLint ✅

No code fix is needed — all actionable checks are green.

MelvinBot · 2026-02-26T15:05:11Z

The only failing check is PR Reviewer Checklist / checklist, and it failed due to a transient GitHub API network timeout — not due to any code issue:

RequestError [HttpError]: request to https://api.github.com/repos/Expensify/App/pulls/83586/reviews?per_page=100 failed, reason: connect ETIMEDOUT 140.82.112.5:443

All code-related checks (ESLint, typecheck, Prettier, tests, builds, spellcheck, etc.) are passing. This checklist failure is unrelated to the PR changes and should resolve on re-run.

When switching between Settings sub-pages, the new screen's useFocusEffect fires before the old screen's blur cleanup (due to React's child-before-parent effect ordering). The cleanup was unconditionally clearing the title, overwriting the new screen's title. Now the cleanup checks if the current title still matches what this screen set — if another screen has already set a different title, the cleanup is skipped. Co-authored-by: {"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"} <{"message":"Not Found","documentation_url":"https://docs.github.com/rest/issues/comments#get-an-issue-comment","status":"404"}@users.noreply.github.com>

MelvinBot · 2026-02-26T15:07:35Z

Thanks for catching this! I've pushed a fix in 64e0ad6.

Root cause of the regression: When switching between Settings sub-pages (e.g., Profile → Preferences), the new screen's useFocusEffect fires before the old screen receives the blur event (React fires child effects before parent effects). So the sequence was:

Preferences' useFocusEffect fires → setPageTitle('Settings - Preferences') ✅
Parent navigator emits blur to Profile
Profile's cleanup fires → setPageTitle('') ← overwrites the correct title ❌

Fix: The cleanup now checks if another screen has already set a new title by comparing the current page title to what this screen originally set. If they differ, it means another screen is already active and has set its own title, so the cleanup skips clearing:

return () => {
    if (getPageTitle() === title) {
        setPageTitle('');
    }
};

This preserves both behaviors:

Navigating away from Settings (to Workspaces/Inbox): No other screen sets a page title, so currentPageTitle still matches → cleanup clears it → title resets to "New Expensify" ✅
Switching Settings sub-tabs: New screen sets its title before cleanup runs → currentPageTitle differs → cleanup is skipped → new title is preserved ✅

Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot · 2026-02-26T15:10:45Z

Fixed the failing Changed files ESLint check. The rulesdir/prefer-early-return rule was flagging the cleanup function in useDocumentTitle.ts because the function body was wrapped in a conditional. Refactored to use an early return (if (getPageTitle() !== title) return;) instead, preserving the same logic.

codecov · 2026-02-26T15:25:00Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
...s/UnreadIndicatorUpdater/updateUnread/index.ios.ts	`100.00% <100.00%> (+33.33%)`	⬆️
src/hooks/useDocumentTitle.ts	`66.66% <66.66%> (-33.34%)`	⬇️
...readIndicatorUpdater/updateUnread/index.android.ts	`0.00% <0.00%> (ø)`
.../libs/UnreadIndicatorUpdater/updateUnread/index.ts	`0.00% <0.00%> (ø)`
... and 14 files with indirect coverage changes

aimane-chnaif · 2026-02-26T15:27:29Z

@MelvinBot there's another glitch.

Go to Settings > Profile > Display Name: this clears title
And navigate back to profile page after close display name page, title glitches:
New Expensify > Settings - Profile > New Expensify > Settings - Profile

I think the expected result should be to keep Settings - Profile when central pane behind modal is profile page.

When a modal or RHP screen opens on top of a central pane screen (e.g., Display Name from Profile), the useFocusEffect cleanup was clearing the title because the central pane loses focus. This caused the title to flash to "New Expensify" and then flicker back when closing the modal. Now the cleanup checks if the topmost root route is a full-screen route. If the blur was caused by a non-full-screen overlay (RHP, onboarding modal, etc.), the title is preserved since the central pane is still visible behind the overlay. Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot · 2026-02-26T15:35:05Z

Good catch! Pushed a fix in 33c39b9.

Root cause: When an RHP/modal screen (like Display Name) opens, it pushes RightModalNavigator onto the root stack on top of SettingsSplitNavigator. This causes ProfilePage to lose focus (React Navigation propagates blur events through the hierarchy), which triggered the useFocusEffect cleanup to clear the title. Since RHP screens don't call useDocumentTitle, no new title was set — so the title fell back to the generic "New Expensify". Then when closing the RHP, ProfilePage regained focus and set the title again, causing the visible flicker.

Fix: The cleanup now checks whether the topmost root route is a full-screen route using the existing isFullScreenName helper. If blur was caused by a non-full-screen overlay (RHP, onboarding modal, etc.), the cleanup skips clearing the title since the central pane is still visible behind the overlay. This is consistent with how FreezeWrapper and getIsNavigationTabBarVisibleDirectly handle the same distinction, and follows the same pattern used in MoneyRequestReportTransactionList for its transaction selection cleanup.

The three cases now work correctly:

Navigating to a different tab (Settings → Workspaces): Topmost route is a full-screen → title is cleared → resets to "New Expensify" ✅
Switching Settings sub-pages (Profile → Preferences): New screen sets its title first → getPageTitle() !== title guard skips cleanup ✅
Opening RHP/modal over central pane (Profile → Display Name): Topmost route is RightModalNavigator (not full-screen) → cleanup is skipped → title stays as "Settings - Profile" ✅

aimane-chnaif · 2026-02-26T16:07:30Z

@MelvinBot close this PR in favor of #83589. We're going on a revert path.

MelvinBot · 2026-02-26T16:09:05Z

Closed this PR in favor of #83589 (revert path), as requested.

MelvinBot assigned aimane-chnaif Feb 26, 2026

MelvinBot requested a review from a team February 26, 2026 14:42

MelvinBot mentioned this pull request Feb 26, 2026

[$250] Web - Tab name persists as "Settings - Profile" after opening Workspaces tab #83582

Open

7 tasks

aimane-chnaif reviewed Feb 26, 2026

View reviewed changes

MelvinBot marked this pull request as ready for review February 26, 2026 14:50

MelvinBot requested a review from a team as a code owner February 26, 2026 14:50

melvin-bot bot requested review from aimane-chnaif and joekaufmanexpensify and removed request for a team February 26, 2026 14:50

melvin-bot bot removed the request for review from a team February 26, 2026 14:50

Retrigger CI after transient GitHub API 500 error in verifySignedCommits

475ab9f

Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot requested a review from a team as a code owner February 26, 2026 14:51

melvin-bot bot requested review from cead22 and removed request for a team February 26, 2026 14:51

aimane-chnaif reviewed Feb 26, 2026

View reviewed changes

Fix: Use early return pattern to satisfy prefer-early-return ESLint rule

9fb7261

Co-authored-by: Aimane Chnaif <aimane-chnaif@users.noreply.github.com>

MelvinBot closed this Feb 26, 2026

Conversation

MelvinBot commented Feb 26, 2026

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

aimane-chnaif left a comment

Choose a reason for hiding this comment

Uh oh!

aimane-chnaif Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

melvin-bot bot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

aimane-chnaif left a comment

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

codecov bot commented Feb 26, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

aimane-chnaif commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

aimane-chnaif commented Feb 26, 2026

Uh oh!

MelvinBot commented Feb 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Feb 26, 2026 •

edited by github-actions bot

Loading