@primer/view-components 0.32.0-rc.ae50af33 → 0.32.0

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

@@ -147,7 +147,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             const dialogInvoker = item.closest('[data-show-dialog-id]');
             if (dialogInvoker) {
                 const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
-                if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+                if (dialog && this.contains(dialogInvoker)) {
                     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleDialogItemActivated).call(this, event, dialog);
                     return;
                 }
@@ -289,20 +289,33 @@ _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleIn
     }
 };
 _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handleDialogItemActivated(event, dialog) {
-    this.querySelector('.ActionListWrap').style.display = 'none';
+    if (this.contains(dialog)) {
+        this.querySelector('.ActionListWrap').style.display = 'none';
+    }
     const dialog_controller = new AbortController();
     const { signal } = dialog_controller;
     const handleDialogClose = () => {
         dialog_controller.abort();
-        this.querySelector('.ActionListWrap').style.display = '';
-        if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+        if (this.contains(dialog)) {
+            this.querySelector('.ActionListWrap').style.display = '';
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+            }
         }
         const activeElement = this.ownerDocument.activeElement;
         const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body;
         const focusInClosedMenu = this.contains(activeElement);
-        if (lostFocus || focusInClosedMenu) {
-            setTimeout(() => this.invokerElement?.focus(), 0);
+        const focusInDialog = dialog.contains(activeElement);
+        if (lostFocus || focusInClosedMenu || focusInDialog) {
+            setTimeout(() => {
+                // if the activeElement has changed after a task, then it's likely
+                // that other JS has tried to shift focus. We should respect that
+                // focus shift as long as it's not back at the document.
+                const newActiveElement = this.ownerDocument.activeElement;
+                if (newActiveElement === activeElement || newActiveElement === this.ownerDocument.body) {
+                    this.invokerElement?.focus();
+                }
+            }, 0);
         }
     };
     // a modal <dialog> element will close all popovers

package/package.json

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