[Due for payment 2025-11-07] [$250] Unable to move the NewDot desktop app window when an image or PDF is open

[m-natarajan]

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: 9.2.31-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @Christinadobrzyn
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Sign into New Expensify (ND) on the Desktop app
2. Open a chat where someone has sent a PDF or image attachment
3. Click to open the PDF/image preview
4. Try to drag/move the app window while the preview is open

Expected Result:

The user should be able to move the ND desktop app window even when an image or PDF preview is open

Actual Result:

When an image or PDF is open, the window becomes fixed in place — the user cannot move it until they close the preview.

Workaround:

Unknown

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

2025-10-15_10-24-18.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021978839721228264173
• Upwork Job ID: 1978839721228264173
• Last Price Increase: 2025-10-23

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Unable to move the NewDot desktop app window when an image or PDF is open

What is the root cause of that problem?

This happens because the modal window is above all other elements (including the area that the user drags) and has the style dragArea: false, which means that this element does not allow dragging:

App/src/components/Modal/BaseModal.tsx

Lines 308 to 309 in 146c218

	<ReanimatedModal
	dataSet={{dragArea: false}}

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

We need to dynamically transfer this style only where it is really needed, and not for all modal windows. There are two ways to do this:

1. Add a new prop and pass this parameter(dragArea) depending on it

2. Pass this parameter(dragArea) depending on the window type (it can be discussed which types should not have this parameter)
   Like this:

dataSet={{dragArea: type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE ? undefined : false}}

3. Depending on fullscreen

4. Wrap only content in this parameter(dragArea) - not all modal with backdrop

What alternative solutions did you explore? (Optional)

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.

[gijoe0295]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-21 09:51:02 UTC.

Proposal

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

Unable to move the NewDot desktop app window when an image or PDF is open

What is the root cause of that problem?

The modal is marked as non-draggable so drag your mouse over the modal backdrop will not work:

App/src/components/Modal/BaseModal.tsx

Lines 308 to 309 in f4bec73

	<ReanimatedModal
	dataSet={{dragArea: false}}

App/web/index.html

Lines 49 to 55 in facb9e7

	[data-drag-area='true'] {
	-webkit-app-region: drag;
	}
	[data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] {
	-webkit-app-region: no-drag;
	}

That was added recently to fix the issue where the context menu button is not responsive because it overlaps the TopBar which is a draggable area:

App/src/components/Navigation/TopBar.tsx

Lines 41 to 44 in dc0c4a9

	<View
	style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ml5, styles.mr3, styles.headerBarHeight]}
	dataSet={{dragArea: true}}
	>

In Electron, a draggable area will ignore all pointer events

Deprecated RCA

The modal overlay is actually a `Pressable`:

App/src/components/Modal/ReanimatedModal/Backdrop/index.tsx

Lines 44 to 54 in 575ad56

	if (!customBackdrop) {
	return (
	<PressableWithoutFeedback
	accessible
	accessibilityLabel={translate('modal.backdropLabel')}
	onPressIn={onBackdropPress}
	>
	{BackdropOverlay}
	</PressableWithoutFeedback>
	);
	}

And in Electron, a button is not draggable, all drag events are ignored on buttons and all pointer events are ignored on draggable area. Draggable areas are identified with dataSet={{dragArea: true}} which is -webkit-app-region: drag underlying.

App/web/index.html

Lines 49 to 55 in facb9e7

	[data-drag-area='true'] {
	-webkit-app-region: drag;
	}
	[data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] {
	-webkit-app-region: no-drag;
	}

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

We should enable shouldUseCustomBackdrop for AttachmentModalContainer. Then fix our BaseOverlay to handle draggable events.

BaseOverlay contains 2 buttons to handle backdrop click events, the top button is very small (~30px):

App/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx

Lines 40 to 56 in 7a21602

	<PressableWithoutFeedback
	style={[styles.draggableTopBar, styles.boxShadowNone, styles.cursorAuto]}
	onPress={onPress}
	accessibilityLabel={translate('common.close')}
	role={CONST.ROLE.BUTTON}
	id={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
	tabIndex={-1}
	/>
	<PressableWithoutFeedback
	style={[styles.flex1, styles.boxShadowNone, styles.cursorAuto]}
	onPress={onPress}
	accessibilityLabel={translate('common.close')}
	role={CONST.ROLE.BUTTON}
	noDragArea
	id={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
	tabIndex={-1}
	/>

As analyzed above, in Electron, draggable areas ignore all pointer events. So one caveat here if you make this area draggable is that if you press this small top area -> onBackdropPress won't be triggered -> you cannot dismiss the modal.

To do that, replace the top Pressable with a View:

<View style={[styles.draggableTopBar, styles.pRelative]} dataSet={{dragArea: true}} />

We'll only apply this change to Desktop so need to create Overlay/index.desktop.tsx file which enables a custom prop to apply the above changes.

Optionally, we can review all Modals and enable shouldUseCustomBackdrop for these CENTERED_x/FULLSCREEN modals if needed to fix this bug completely on Desktop app.

What alternative solutions did you explore? (Optional)

None

Results

Drag the top area (~30px) moves the window:

Screen.Recording.2025-10-16.at.04.13.37.mov

Caveat: Press the top area (~30px) does not dismiss the backdrop but press the bottom part does:

Screen.Recording.2025-10-16.at.04.13.52.mov

[joekaufmanexpensify]

Reproduced

[melvin-bot]

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

[melvin-bot]

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