Merge pull request #21287 from colemanw/afformButton

Afform - Fix button appearance and block form during submission

ext/afform/admin/Civi/AfformAdmin/AfformAdminMeta.php

@@ -236,7 +236,7 @@ class AfformAdminMeta {
         'title' => E::ts('Submit Button'),
         'element' => [
           '#tag' => 'button',
-          'class' => 'af-button btn-primary',
+          'class' => 'af-button btn btn-primary',
           'crm-icon' => 'fa-check',
           'ng-click' => 'afform.submit()',
           '#children' => [

ext/afform/core/ang/af/afForm.component.js

@@ -4,7 +4,7 @@
     bindings: {
       ctrl: '@'
     },
-    controller: function($scope, $timeout, crmApi4, crmStatus, $window, $location, FileUploader) {
+    controller: function($scope, $element, $timeout, crmApi4, crmStatus, $window, $location, FileUploader) {
       var schema = {},
         data = {},
         status,
@@ -79,10 +79,13 @@
           $window.location.href = url;
         }
         status.resolve();
+        $element.unblock();
       }
 
       this.submit = function() {
         status = CRM.status({});
+        $element.block();
+
         crmApi4('Afform', 'submit', {
           name: ctrl.getFormMeta().name,
           args: $scope.$parent.routeParams || {},

ext/afform/core/ang/afCore.css

@@ -17,6 +17,9 @@ a.af-api4-action-idle {
     margin-right: .5em;
     vertical-align: top;
 }
+af-form {
+  display: block;
+}
 
 [af-repeat-item] {
   position: relative;