From c4ef290859eaec63c457f6c3afec3a8318627583 Mon Sep 17 00:00:00 2001 From: Alex Morega Date: Tue, 9 Jan 2024 18:57:45 +0200 Subject: [PATCH] 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 | 1 + client/src/entrypoints/admin/modal-workflow.js | 12 ++++++++++-- docs/releases/6.0.md | 1 + .../wagtailadmin/shared/_workflow_init.html | 1 + 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 99df784d95..a26cf093e1 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/client/src/entrypoints/admin/modal-workflow.js b/client/src/entrypoints/admin/modal-workflow.js index 451c9e29df..b09db4f7b2 100644 --- a/client/src/entrypoints/admin/modal-workflow.js +++ b/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'); } }); diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index 070bbbc0cd..9033ad1711 100644 --- a/docs/releases/6.0.md +++ b/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 diff --git a/wagtail/admin/templates/wagtailadmin/shared/_workflow_init.html b/wagtail/admin/templates/wagtailadmin/shared/_workflow_init.html index 11b180905d..7453888bc7 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/_workflow_init.html +++ b/wagtail/admin/templates/wagtailadmin/shared/_workflow_init.html @@ -32,6 +32,7 @@ e.currentTarget.click(); } }, + 'triggerElement': e.currentTarget, }); } });