make mass input more accessible with more checks on form submit events

static/js/utils/massInput.js

@@ -24,6 +24,7 @@
   var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
 
   var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
+  var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
   var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
 
   var massInputUtil = function(element) {
@@ -52,7 +53,9 @@
       return {
         name: MASS_INPUT_UTIL_NAME,
         element: element,
-        destroy: function() {},
+        destroy: function() {
+          reset();
+        },
       };
     }
 
@@ -80,11 +83,26 @@
 
         // find the according massinput cell thats hosts the element that triggered the submit
         var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
+        if (!massInputCell) {
+          return false;
+        }
+
+        var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
+        if (!submitButton) {
+          return false;
+        }
+
+        var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
+        var submitButtonIsActive = submitButton.matches(':focus, :active');
+        // if the cell is not an add cell the active element must at least be the cells submit button
+        if (!isAddCell && !submitButtonIsActive) {
+          return false;
+        }
 
         event.preventDefault();
-        var requestBody = serializeForm(massInputCell, enctype);
+        var requestBody = serializeForm(submitButton, enctype);
 
-        if (requestFn) {
+        if (requestFn && requestBody) {
           requestFn(
             url,
             {
@@ -96,6 +114,9 @@
             return response.text();
           }).then(function(response) {
             processResponse(response);
+            if (isAddCell) {
+              reFocusAddCell();
+            }
           });
         }
       };
@@ -111,16 +132,11 @@
       }
     }
 
-    function serializeForm(massInputCell, enctype) {
+    function serializeForm(submitButton, enctype) {
       var formData = new FormData(massInputForm);
 
       // manually add name and value of submit button to formData
-      if (massInputCell) {
-        var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
-        if (submitButton) {
-          formData.append(submitButton.name, submitButton.value);
-        }
-      }
+      formData.append(submitButton.name, submitButton.value);
 
       if (enctype === 'application/x-www-form-urlencoded') {
         return new URLSearchParams(formData);
@@ -131,6 +147,22 @@
       }
     }
 
+    function reFocusAddCell() {
+      var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
+      if (!addCell) {
+        return false;
+      }
+
+      var addCellInput = addCell.querySelector('input:not([type="hidden"])');
+      if (addCellInput) {
+        // clear the inputs value
+        // TBD: make this work for checkboxes and radioboxes
+        // where the value should not be cleared
+        addCellInput.value = '';
+        addCellInput.focus();
+      }
+    }
+
     function reset() {
       element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
       massInputForm.removeEventListener('submit', massInputFormSubmitHandler)