Repository navigation
Conversation
Vanilla Calendar Pro appends the popup to the body. A modal dialog and its backdrop sit in the top layer. The popup paints under that layer. Move the popup into the open dialog. Co-authored-by: ump45nose <ump45nose@users.noreply.github.com>
julien-deramond
added
v6
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The datepicker menu now opens inside an open dialog. It paints above the dialog and the backdrop.
Vanilla Calendar Pro appends the popup to the body. It sets
leftandtopin page coordinates. A modal dialog and its backdrop use the top layer. A popup on the body paints under that layer.z-indexcannot raise it.The datepicker moves the popup into an open dialog when that dialog does not clip overflow. It then maps the page coordinates onto the dialog padding edge. A window resize keeps that place. Closing the dialog hides the datepicker.
Motivation & Context
A datepicker opened from a dialog shows its menu behind the backdrop. Fixes #43093.
Type of changes
Checklist
npm run lint)Live previews
js/tests/visual/datepicker.html, section "Inside a dialog".Related issues
Fixes #43093
Tests
npm run js-lint: exit 0. Six pre-existing warnings remain. This change adds none.npm run js-typecheck: exit 0.npx vitest run --config js/tests/vitest.config.mts --coverage: 34 files, 1366 tests passed.Browser check with Playwright in Chromium and WebKit: the menu parent is the open dialog, hit tests on the menu (including over the backdrop) hit the menu, the menu lines up with the input when scrolled, and a date click fills the input and hides the menu. A non-modal dialog behaves the same.
This change was prepared with an AI coding agent and reviewed before submission.