[Due for payment 2025-08-07] [$250] Multiple backdrops appear for some modals opened from within modals

[mhawryluk]

Reproducible in staging?: Yes
Reproducible in production?: Yes
Slack conversation (hyperlinked to channel name): https://swmansion.slack.com/archives/C05LX9D6E07/p1752493578778789?thread_ts=1751910765.756109&cid=C05LX9D6E07

Action Performed:

1. Create new expense
2. Next
3. Date
4. Click on Year on the calendar

also:

1. Reports
2. Reports
3. Click on a report
4. Date
5. Year (2025)

also:

1. Go to /enable-payments
2. State

also:

1. Open chat
2. Click the chat name
3. Click the avatar
4. Click "Upload photo"
5. Select image

Expected Result:

Modal appears without adding additional visible backdrop on top of the one already there. (Clicking outside the modal should invoke the action set for the new modal's backdrop though).

Actual Result:

Modal appears and adds an additional visible backdrop on top of the one already there, so the backdrop looks less transparent. (Clicking on the backdrop does invoke the action set for the new modal, so this works fine).

Workaround:

Just a visual issue, no workaround necessary.

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

462356829-256d4d46-f6a7-497f-a239-f2238d819cb0.mov

2Nagranie.z.ekranu.2025-07-15.o.09.21.41.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021945057002581689414
• Upwork Job ID: 1945057002581689414
• Last Price Increase: 2025-07-15

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[drminh2807]

Proposal

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

Multiple backdrops appear for some modals opened from within modals

What is the root cause of that problem?

We set backdrop opacity here

App/src/components/Modal/BaseModal.tsx

Line 321 in 957f688

backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity}

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

We shoudn't set backdrop if isInNarrowPane

      backdropOpacity={(!shouldUseCustomBackdrop && hideBackdrop) || isInNarrowPane ? 0 : variables.overlayOpacity}

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[ZhenjaHorbach]

@drminh2807

Sorry
But @mhawryluk will work on this issue

[melvin-bot]

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

[melvin-bot]

Current assignee @ZhenjaHorbach is eligible for the External assigner, not assigning anyone new.