[Issue-39831] Resolve Calendar popup opens over display

[bhavieway]

Description (*)

This pull request addresses a UI issue where the calendar popup (used in various date fields) displays incorrectly when the page is scrolled. The issue occurs because getBoundingClientRect returns coordinates relative to the viewport, whereas the expected behavior is based on the full document scroll. The fix adjusts the position calculation to ensure the popup displays in the correct location regardless of scroll position.

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes Calendar popup opens over display #39831

Manual testing scenarios (*)

Case 1: Orders Grid in Admin Panel

1. Navigate to Sales > Orders in the Magento Admin.
2. Expand the Filters section.
3. Scroll the page so that the "Purchase Date" field is at the top of the viewport.
4. Click the calendar icon for the "Purchase Date From" field.

Expected Result:
The calendar popup appears correctly below the input field.

Actual Result (Before Fix):
The calendar popup appears offset or overlays other parts of the screen incorrectly.

Case 2: Product Attribute Date Field

1. Navigate to Stores > Product attribute with a Date input type.
2. Edit or create an attribute using a Date input.
3. Scroll to the input field and click the calendar icon.

Expected Result:
Calendar appears correctly relative to the input field.

Questions or comments

• This issue affects both Adminhtml and Storefront areas.
• The fix ensures popup positioning accounts for scroll offset relative to the document, not just the viewport.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

---

Preconditions and environment

• Magento version: 2.4.8

[m2-assistant]

Hi @bhavieway. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.
❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

[bhavieway]

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

[magento-automated-testing]

Failed to run the builds. Please try to re-run them later.

[magento-automated-testing]

Failed to run the builds. Please try to re-run them later.

[magento-automated-testing]

Failed to run the builds. Please try to re-run them later.

[bhavieway]

@magento run all tests

[bhavieway]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE

[bhavieway]

@magento run Sample Data Tests CE

[magento-automated-testing]

Failed to run the builds. Please try to re-run them later.