v0.14.12

web/js/select-ui.js

@@ -43,6 +43,18 @@ function customSelectLabel(select) {
   return labelSpan?.textContent?.trim() || select.name || select.id || '';
 }
 
+function customSelectMenuHost(select) {
+  // A modal <dialog> makes everything outside its DOM subtree inert.  Keep
+  // the popover menu inside the same dialog so pointer hover/click continues
+  // to work while the dialog is shown with showModal().
+  return select.closest('dialog') || document.body;
+}
+
+function ensureCustomSelectMenuHost(select, state) {
+  const host = customSelectMenuHost(select);
+  if (state.menu.parentElement !== host) host.appendChild(state.menu);
+}
+
 function customSelectOptionRows(select) {
   const rows = [];
   [...select.children].forEach(child => {
@@ -198,6 +210,7 @@ function closeCustomSelect(state = customSelectOpenState) {
 function openCustomSelect(select) {
   const state = customSelectRegistry.get(select);
   if (!state || select.disabled) return;
+  ensureCustomSelectMenuHost(select, state);
   if (customSelectOpenState === state && state.open) {
     closeCustomSelect(state);
     return;
@@ -280,7 +293,7 @@ function enhanceCustomSelect(select) {
   menu.setAttribute('role', 'listbox');
   menu.setAttribute('popover', 'manual');
   menu.hidden = true;
-  document.body.appendChild(menu);
+  customSelectMenuHost(select).appendChild(menu);
 
   let wrapper = null;
   let trigger = toolbarHost;