[$250] Web-The date picker pops out of its container when the window is resized

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.28-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #56068
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Windows 10/ Chrome
App Component: User Settings

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with any Expensify account
3. Go to Setting > Profile
4. Click on Date of birth
5. Resize the window several times

Expected Result:

The date picker should always be in its container.

Actual Result:

The date picker pops out of its container when the window is resized.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6802369_1744693261114.Date_picker_pops_out.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021921822506334739852
• Upwork Job ID: 1921822506334739852
• Last Price Increase: 2025-05-12
• Automatic offers:
• linhvovan29546 | Contributor | 107302396

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @techievivek (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[techievivek]

This is coming from here #56068
cc @perunt @grgia

[techievivek]

This can be demoted, just a styling issue, users can still select the date.

[shubham1206agra]

@techievivek This was observed here #56068 (comment) but we decided to merge the PR anyways.

[melvin-bot]

@JmillsExpensify @techievivek this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[techievivek]

@perunt Would you be interested in working on the resizing issue that was first observed in your PR here #56068 (comment)?

[melvin-bot]

📣 @linhvovan29546 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[shubham1206agra]

@DylanDylann, can you hold the review of this issue/PR?

Thanks

[shubham1206agra]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-16 14:25:22 UTC.

Proposal

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

Web-The date picker pops out of its container when the window is resized

What is the root cause of that problem?

We actually forgot to remove useEffect, which was used earlier, because we were using a different popover mechanism.

App/src/components/DatePicker/index.tsx

Lines 90 to 92 in 6bfac98

	useEffect(() => {
	calculatePopoverPosition();
	}, [calculatePopoverPosition, windowWidth]);

But this useEffect is not required anymore since we are using PopoverWithMeasuredContent, which handles resizing automatically.

App/src/components/DatePicker/DatePickerModal.tsx

Line 63 in 6bfac98

<PopoverWithMeasuredContent

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

Remove this useEffect

App/src/components/DatePicker/index.tsx

Lines 90 to 92 in 6bfac98

	useEffect(() => {
	calculatePopoverPosition();
	}, [calculatePopoverPosition, windowWidth]);

Also, update the following useEffect

App/src/components/DatePicker/index.tsx

Lines 94 to 101 in 6bfac98

	useEffect(() => {
	if (!autoFocus) {
	return;
	}
	InteractionManager.runAfterInteractions(() => {
	handlePress();
	});
	}, [handlePress, autoFocus]);

to focus only once.

useEffect(() => {
    if (!autoFocus || isAutoFocused.current) {
         return;
    }
    isAutoFocused.current = true;
    InteractionManager.runAfterInteractions(() => {
        handlePress();
    });
}, [handlePress, autoFocus]);

Result

Screen.Recording.2025-05-16.at.10.48.14.AM.mov

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

Not Required as this is an UI issue

What alternative solutions did you explore? (Optional)

[techievivek]

@DylanDylann Could you please review Shubham's proposal as well? It appears to be more performant than the currently selected one. If you agree, we’d prefer to move forward with his approach instead.

[shubham1206agra]

Hello everyone, @DylanDylann

I have put up a proposal because no proposal currently present addresses the root issue. We are not using the Popover component, which requires constant calculation on resizing. Instead, we are using PopoverWithMeasuredContent, which has the resizing handling in-built. For the next time, please look into which component we are using for Popover, since hiding Popover is not an ideal solution for menu/input popover components. It's only ideal for Tooltip.

[DylanDylann]

@shubham1206agra Great, let's me take a look

[DylanDylann]

@shubham1206agra Your solution seems fine and also helps to clean up the codebase. But I see a minor problem with your proposal. Could you help to take a look?

Screen.Recording.2025-05-16.at.15.15.10.mov

[shubham1206agra]

@DylanDylann, can you check if this problem is also present in the date filter on the search page?

[shubham1206agra]

@DylanDylann There is an issue with autoFocus inputs. See

App/src/components/DatePicker/index.tsx

Lines 94 to 101 in 6bfac98

	useEffect(() => {
	if (!autoFocus) {
	return;
	}
	InteractionManager.runAfterInteractions(() => {
	handlePress();
	});
	}, [handlePress, autoFocus]);

This useEffect will always trigger when windowHeight was changed. And at last, window height was not changed. That's why anchor used the wrong value. We need to make this useEffect run only once on autoFocus.

[DylanDylann]

This useEffect will always trigger when windowHeight was changed. And at last, window height was not changed. That's why anchor used the wrong value. We need to make this useEffect run only once on autoFocus.

@shubham1206agra Why does this useEffect trigger when windowHeight is changed even though windowHeight isn't listed on the dependency list?

[DylanDylann]

We need to make this useEffect run only once on autoFocus.

could you update your proposal to cover this problem?

[shubham1206agra]

@DylanDylann Done

[DylanDylann]

@shubham1206agra Thanks for your update. Your proposal looks fine to me. @linhvovan29546 Sorry for the back and forth, but @shubham1206agra's proposal seems more correct and fix this problem originally and also helps to clean up the codebase

@techievivek could you take a look at the new proposal and give the decision on the assignment again? Many thanks

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @techievivek is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[shubham1206agra]

@linhvovan29546 Don't worry, you will be paid (not sure about the amount) at the end of this issue.

[techievivek]

Yeah, since you've already raised the PR, I can check in with Jason and get the bounty sorted for you as well.