tweaks to how buttons disable themselves

wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js

@@ -84,7 +84,7 @@ $(function() {
     /* close all dropdowns on body clicks */
     $(document).on('click', function(e) {
         var relTarg = e.relatedTarget || e.toElement;
-        if (!$(relTarg).hasClass('dropdown-toggle')) {
+        if(!$(relTarg).hasClass('dropdown-toggle') && !$(relTarg).closest('.dropdown').length){
             $('.dropdown').removeClass('open');
         }
     });
@@ -151,8 +151,8 @@ $(function() {
         var timeoutLength = 30; // Button re-enables after this time (seconds), to allow for errors in submissions causing forms to be permanently un-usable
         var dataname = 'disabledtimeout'
 
-        e.preventDefault();
-
+        // Disabling a button prevents it submitting the form, so disabling must occur on a timeout only after this function returns
+        var timeout = setTimeout(function(){
             // save original button value
             $self.data('original-text', $replacementElem.text());
 
@@ -166,10 +166,10 @@ $(function() {
                 if($self.data('clicked-text') && $replacementElem.length){
                     $replacementElem.text($self.data('clicked-text'));
                 }    
-
-            $self.closest('form').submit();
                 $self.addClass('button-longrunning-active').prop('disabled', 'true');                   
-               
             }
+            
+            clearTimeout(timeout);
+        },10);   
     });
 });

wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html

@@ -32,7 +32,7 @@
             <ul>
                 <li class="actions">
                     <div class="dropdown dropup dropdown-button match-width">
-                        <input type="submit" value="{% if page.locked %}{% trans 'Page locked' %}{% else %}{% trans 'Save draft' %}{% endif %}" class="button" {% if page.locked %}disabled {% endif %} />
+                        <button type="submit" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% if page.locked %}{% trans 'Page locked' %}{% else %}{% trans 'Save draft' %}{% endif %}</em></button>
                         
                         {% if not page.locked %}
                             <div class="dropdown-toggle icon icon-arrow-up"></div>
@@ -44,7 +44,9 @@
                                     <li><a href="{% url 'wagtailadmin_pages:delete' page.id %}" class="shortcut">{% trans 'Delete' %}</a></li>
                                 {% endif %}
                                 {% if page_perms.can_publish %}
-                                    <li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
+                                    <li>
+                                        <button type="submit" name="action-publish" value="action-publish" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Publishing...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% trans 'Publish' %}</em></button>
+                                    </li>
                                 {% endif %}
                                 <li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
                             </ul>