@primer/view-components 0.18.1 → 0.18.2-rc.a3f0632d

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -320,7 +320,6 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
         }
     };
     // a modal <dialog> element will close all popovers
-    setTimeout(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this), 0);
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };

package/app/components/primer/dialog_helper.js

@@ -11,6 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _DialogHelperElement_abortController;
 function dialogInvokerButtonHandler(event) {
+    var _a;
     const target = event.target;
     const button = target === null || target === void 0 ? void 0 : target.closest('button');
     if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
@@ -25,6 +26,40 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
+            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+            // any popover that is currently open, regardless of whether or not another top layer element,
+            // such as a <dialog> is nested inside.
+            // See https://github.com/whatwg/html/issues/9998.
+            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
+            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            let node = button;
+            let fixed = false;
+            while (node) {
+                node = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('[popover]:not(:popover-open)');
+                if (node && node.popover === 'auto') {
+                    node.classList.add('dialog-inside-popover-fix');
+                    node.popover = 'manual';
+                    node.showPopover();
+                    fixed = true;
+                }
+            }
+            if (fixed) {
+                // We need to re-open the dialog as modal, and also ensure no close event listeners
+                // are trying to act on the close
+                dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+                dialog.close();
+                dialog.showModal();
+                dialog.addEventListener('close', () => {
+                    for (const el of dialog.ownerDocument.querySelectorAll('.dialog-inside-popover-fix')) {
+                        if (el.contains(dialog)) {
+                            el.classList.remove('dialog-inside-popover-fix');
+                            el.popover = 'auto';
+                            el.showPopover();
+                        }
+                    }
+                }, { once: true });
+            }
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -52,21 +87,6 @@ export class DialogHelperElement extends HTMLElement {
             for (const record of records) {
                 if (record.target === this.dialog) {
                     this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
-                    // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-                    // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-                    // any popover that is currently open, regardless of whether or not another top layer element,
-                    // such as a <dialog> is nested inside.
-                    // See https://github.com/whatwg/html/issues/9998.
-                    // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
-                    // we must undo the work they did to hide ancestral popovers of the dialog:
-                    if (this.dialog.hasAttribute('open')) {
-                        let node = this.dialog;
-                        while (node) {
-                            node = node.closest('[popover]:not(:popover-open)');
-                            if (node)
-                                node.showPopover();
-                        }
-                    }
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.18.1",
+  "version": "0.18.2-rc.a3f0632d",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",