Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setup: the wizard's select popups opened behind its own modal

Browse Source 
Reported: the dropdowns in Add destination don't work. They rendered correctly,
reported as enhanced, and did nothing when clicked.

custom-select portals its popup into <body> at z-index 1200, chosen — as
forms.css says in as many words — to clear eo-modal at 1100. The wizard raises
its modal to 10000, because at 1100 a modal opened from inside the wizard
rendered behind the wizard itself. That fix silently broke the other invariant:
the popup then opened behind the dialog that owns it. Raise the popup with it,
scoped to the wizard so nothing else's stacking moves.

The test already asserted the select was enhanced, which was true and useless —
the control was enhanced, it just could not be reached. So it now hit-tests:
open the popup and ask what is actually on top at its own centre, then click an
option and check the value, the button label and the field group all follow.
Verified by removing the rule again: two checks fail.

That is the second time this pair has bitten (the modal itself did the same
thing earlier), so the rule and the reason now sit together in one comment.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-08-28 11:25:41 +01:00
parent 00114a6ce2
commit d51e014cad
2 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
containers/libreportal/frontend/core/setup/css/setup-wizard.css
View File

@ -1286,6 +1286,14 @@ body.setup-wizard-open {
up, so no other overlay's stacking is affected. */ up, so no other overlay's stacking is affected. */
body.setup-wizard-open .eo-modal { z-index: 10000; } body.setup-wizard-open .eo-modal { z-index: 10000; }
/* And whatever is meant to float ABOVE a modal has to come up with it.
custom-select portals its popup into <body> at z-index 1200 — chosen, as
forms.css says, to clear eo-modal at 1100. Raising the modal to 10000 above
silently broke that: inside the wizard the dropdown opened behind the dialog
that owns it, so a select looked properly enhanced and simply did not
respond. Scoped to the wizard, so no other overlay's stacking moves. */
body.setup-wizard-open .custom-select-popup { z-index: 10001; }
/* Modal chrome comes from the shared eo-modal (core/overlays). Only the /* Modal chrome comes from the shared eo-modal (core/overlays). Only the
storage-specific CONTENT styles below are ours — they render inside storage-specific CONTENT styles below are ours — they render inside
.eo-modal-body. */ .eo-modal-body. */

38
scripts/dev/lp-backup-dialog-test
View File

@ -60,6 +60,35 @@ read -r -d '' DRIVE <<'JS'
out.labelsStyled = !!document.querySelector('.setup-field label'); out.labelsStyled = !!document.querySelector('.setup-field label');
out.groupsAtOpen = groupsShown(); out.groupsAtOpen = groupsShown();
// The popup must be REACHABLE, not merely present. custom-select portals it
// into <body> at z-index 1200 — above eo-modal's 1100 — but the wizard raises
// its modal to 10000, which put the popup behind the dialog that owns it. The
// control still reported as enhanced and simply did not respond, so only a
// hit test catches it: what is actually on top at the popup's own centre?
{
const btn = type.closest('.custom-select').querySelector('.custom-select-button');
btn.click();
await wait(400);
const popup = document.querySelector('.custom-select-popup');
out.popupOpens = !!popup;
if (popup) {
const r = popup.getBoundingClientRect();
const hit = document.elementFromPoint(r.left + r.width / 2, r.top + 12);
out.popupZ = parseInt(getComputedStyle(popup).zIndex, 10);
out.modalZ = parseInt(getComputedStyle(document.querySelector('.eo-modal')).zIndex, 10);
out.popupOnTop = !!(hit && hit.closest('.custom-select-popup'));
out.popupOptions = popup.querySelectorAll('.custom-select-option').length;
// And picking one has to take effect, the way a person would do it.
const opt = [...popup.querySelectorAll('.custom-select-option')]
.find(o => /SFTP/i.test(o.textContent));
if (opt) { opt.click(); await wait(400); }
out.pickedValue = type.value;
out.pickedLabel = btn.textContent.trim();
out.pickedGroups = groupsShown();
}
}
// Each type shows only its own fields. // Each type shows only its own fields.
out.swap = {}; out.swap = {};
for (const want of ['sftp','s3','b2','local']) { for (const want of ['sftp','s3','b2','local']) {
@ -110,6 +139,15 @@ chk "labels styled" "$(jq -r .labelsStyled <<< "$OUT")" "true"
chk "opens on local" "$(jq -r '.groupsAtOpen | join(",")' <<< "$OUT")" "local" chk "opens on local" "$(jq -r '.groupsAtOpen | join(",")' <<< "$OUT")" "local"
chk "add button is styled" "$(jq -r .addButtonStyled <<< "$OUT")" "true" chk "add button is styled" "$(jq -r .addButtonStyled <<< "$OUT")" "true"
echo "--- the dropdown is reachable, not just enhanced ---"
chk "popup opens" "$(jq -r .popupOpens <<< "$OUT")" "true"
chk "four options" "$(jq -r .popupOptions <<< "$OUT")" "4"
chk "popup above modal" "$(jq -r 'if .popupZ > .modalZ then "true" else "false" end' <<< "$OUT")" "true"
chk "popup is on top" "$(jq -r .popupOnTop <<< "$OUT")" "true"
chk "picking applies" "$(jq -r .pickedValue <<< "$OUT")" "sftp"
chk "button label" "$(jq -r .pickedLabel <<< "$OUT")" "SFTP"
chk "fields followed" "$(jq -r '.pickedGroups | join(",")' <<< "$OUT")" "sftp"
echo "--- each type shows only its own fields ---" echo "--- each type shows only its own fields ---"
for ty in local sftp s3 b2; do for ty in local sftp s3 b2; do
chk "$ty" "$(jq -r --arg t "$ty" '.swap[$t] | join(",")' <<< "$OUT")" "$ty" chk "$ty" "$(jq -r --arg t "$ty" '.swap[$t] | join(",")' <<< "$OUT")" "$ty"