Explicitly set triggerElement when invoking save (with publish) button on pages

Fixes #11420

Two issues existed;
1. Safari will not set `document.activeElement` as expected in all other browsers, instead, when a button is clicked it will keep the activeElement as `body`. This meant that the reset of the disabled button (before the confirm triggers a click) was not working.
2. Visually the button still had the loading spinner due to w-progress controller having triggered the loading visuals, this did not block the behaviour but looked broken.

See Safari behaviour docs:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
- https://bugs.webkit.org/show_bug.cgi?id=22261

CHANGELOG.txt

@@ -86,6 +86,7 @@ Changelog
  * Fix: Ensure that defaulted or unique values declared in `exclude_fields_in_copy` are correctly excluded in new copies, resolving to the default value (Elhussein Almasri)
  * Fix: Ensure that `default_ordering` set on IndexView is preserved if ModelViewSet does not specify an explicit ordering (Cynthia Kiser)
  * Fix: Ensure that TableBlock cells are accessible when using keyboard control only (Elhussein Almasri)
+ * Fix: Resolve issue where clicking Publish for a Page that was in workflow in Safari would block publishing and not trigger the workflow confirmation modal (Alex Morega)
  * Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi)
  * Docs: Document all features for the Documents app in one location (Neeraj Yetheendran)
  * Docs: Add section to testing docs about creating pages and working with page content (Mariana Bedran Lesche)

client/src/entrypoints/admin/modal-workflow.js

@@ -19,6 +19,9 @@ function ModalWorkflow(opts) {
     'onload' (optional): dict of callbacks to be called when loading a step of the workflow.
       The 'step' field in the response identifies the callback to call, passing it the
       modal object and response data as arguments
+    'triggerElement' (optional): element that triggered the modal.
+      It will be disabled while the modal is shown.
+      If not provided, defaults to `document.activeElement` (which may not work as expected in Safari).
   */
 
   const self = {};
@@ -37,8 +40,11 @@ function ModalWorkflow(opts) {
     /* remove any previous modals before continuing (closing doesn't remove them from the dom) */
     $('body > .modal').remove();
 
-    // disable the trigger element so it cannot be clicked twice while modal is loading
-    self.triggerElement = document.activeElement;
+    // Disable the trigger element so it cannot be clicked twice while modal is loading, allow triggerElement to be passed in via opts.
+    // Important: Safari will not focus on an element on click so activeElement will not be set as expected
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+    // https://bugs.webkit.org/show_bug.cgi?id=22261
+    self.triggerElement = opts.triggerElement || document.activeElement;
     self.triggerElement.setAttribute('disabled', true);
 
     // set default contents of container
@@ -61,6 +67,8 @@ function ModalWorkflow(opts) {
     self.container.on('hide.bs.modal', () => {
       if (!self.triggerElement.hasAttribute('data-force-disabled')) {
         self.triggerElement.removeAttribute('disabled');
+        // support w-progress controller reset if activated on the button's click
+        self.triggerElement.removeAttribute('data-w-progress-loading-value');
       }
     });
 

docs/releases/6.0.md

@@ -124,6 +124,7 @@ This feature was implemented by Nick Lee, Thibaud Colas, and Sage Abdullah.
  * Ensure that defaulted or unique values declared in `exclude_fields_in_copy` are correctly excluded in new copies, resolving to the default value (Elhussein Almasri)
  * Ensure that `default_ordering` set on IndexView is preserved if ModelViewSet does not specify an explicit ordering (Cynthia Kiser)
  * Ensure that TableBlock cells are accessible when using keyboard control only (Elhussein Almasri)
+ * Resolve issue where clicking Publish for a Page that was in workflow in Safari would block publishing and not trigger the workflow confirmation modal (Alex Morega)
 
 
 ### Documentation

wagtail/admin/templates/wagtailadmin/shared/_workflow_init.html

@@ -32,6 +32,7 @@
                                             e.currentTarget.click();
                                         }
                                     },
+                                    'triggerElement': e.currentTarget,
                                 });
                             }
                         });