[JENKINS-76249] Fix form submission when a dropdown changes and the web response is slow

calling renderOnDemand can cause the dom to be manipulated
aynchronouslyi due to function calls going to the Jenkins server (e.g.
stapler/bound/xxx/render).  When this occurs if there is a subsequent change to the
dropdown selection before this completes, when the HTML is finally
obtained from Jenkins it is inserted into the DOM, but it is inserted as
if it is still the selected option (ie it is not disable for the form).

renderOnDemand takes a callback function that will be called when the
DOM manipulation is complete, however the updateDropDownList did not
pass any function.

We now pass a function that manipulates the just added HTML if the
selected item is in fact no longer selected.

Author: jtnord

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1683,47 +1683,66 @@ function rowvgStartEachRow(recursive, f) {
         return;
       }
 
-      var subForms = [];
-      var start = findInFollowingTR(e, "dropdownList-container");
+      function buildSubForms(e) {
+        var subForms = [];
+        var start = findInFollowingTR(e, "dropdownList-container");
 
-      do {
-        start = start.firstElementChild;
-      } while (start && !isTR(start));
+        do {
+          start = start.firstElementChild;
+        } while (start && !isTR(start));
 
-      if (start && !start.classList.contains("dropdownList-start")) {
-        start = findFollowingTR(start, "dropdownList-start");
-      }
-      while (start != null) {
-        subForms.push(start);
-        start = findFollowingTR(start, "dropdownList-start");
+        if (start && !start.classList.contains("dropdownList-start")) {
+          start = findFollowingTR(start, "dropdownList-start");
+        }
+        while (start != null) {
+          subForms.push(start);
+          start = findFollowingTR(start, "dropdownList-start");
+        }
+        return subForms;
       }
 
+      var subForms = buildSubForms(e);
       // control visibility
       function updateDropDownList() {
         for (var i = 0; i < subForms.length; i++) {
           var show = e.selectedIndex == i;
           var f = subForms[i];
 
           if (show) {
-            renderOnDemand(f.nextElementSibling);
+            const idx = i; // capture the index so that it is not mutated in the loop
+            renderOnDemand(f.nextElementSibling, function () {
+              var current = e.selectedIndex == idx;
+              if (!current) {
+                console.log(
+                  "**** renderOnDemandCallback, selection no longer valid, form submission would have been corrupted",
+                );
+                // our form div has changed (but the index is stable) so go and re-get the new domtree
+                var subForm = buildSubForms(e)[i];
+                updateDropDownFormRowVisibility(subForm, false);
+              }
+            });
           }
-          f.rowVisibilityGroup.makeInnerVisible(show);
-
-          // TODO: this is actually incorrect in the general case if nested vg uses field-disabled
-          // so far dropdownList doesn't create such a situation.
-          f.rowVisibilityGroup.eachRow(
-            true,
-            show
-              ? function (e) {
-                  e.removeAttribute("field-disabled");
-                }
-              : function (e) {
-                  e.setAttribute("field-disabled", "true");
-                },
-          );
+          updateDropDownFormRowVisibility(f, show);
         }
       }
 
+      function updateDropDownFormRowVisibility(f, show) {
+        f.rowVisibilityGroup.makeInnerVisible(show);
+
+        // TODO: this is actually incorrect in the general case if nested vg uses field-disabled
+        // so far dropdownList doesn't create such a situation.
+        f.rowVisibilityGroup.eachRow(
+          true,
+          show
+            ? function (e) {
+                e.removeAttribute("field-disabled");
+              }
+            : function (e) {
+                e.setAttribute("field-disabled", "true");
+              },
+        );
+      }
+
       e.onchange = updateDropDownList;
 
       updateDropDownList();