Fix command palette results being unclickable
The backdrop div was nested inside .modal instead of rendered as its sibling. Tabler/Bootstrap's backdrop (z-index 1050) is only supposed to sit below the modal (z-index 1055) because normally they're both direct children of the same stacking context; nesting it inside .modal instead made it establish z-index inside .modal's own stacking context, where it painted on top of .modal-dialog and silently absorbed every click meant for a result row (confirmed via elementFromPoint in a real browser: clicking a result hit .modal-backdrop, not the result div). Moved the backdrop to be a sibling rendered before .modal, matching the structure elementFromPoint now confirms resolves to the actual result element. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5c1376cf1c
commit
9c07718d2d
1 file changed
+8
-1
@@ -192,6 +192,13 @@ export default function CommandPalette() {
|
||||
let lastCategory = "";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Rendered as a sibling, not a child, of .modal — Tabler/Bootstrap's z-index values
|
||||
(backdrop 1050 vs modal 1055) only sort correctly when compared in the same
|
||||
stacking context. Nested inside .modal, the backdrop was created its own stacking
|
||||
context and painted on top of .modal-dialog, silently swallowing every click meant
|
||||
for a result row. */}
|
||||
<div className="modal-backdrop show"></div>
|
||||
<div className="modal modal-blur show" style={{ display: "block" }} onClick={() => setOpen(false)}>
|
||||
<div className="modal-dialog modal-dialog-centered" style={{ maxWidth: 600 }} onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-content">
|
||||
@@ -242,7 +249,7 @@ export default function CommandPalette() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-backdrop show"></div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user