[JENKINS-76249] Fix form submission when a dropdown changes and the back end response is slow (#26161)

* [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.

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

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>

---------

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>
(cherry picked from commit 46a0a75)

Author: 2 people

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 () {
+              const current = e.selectedIndex == idx;
+              if (!current) {
+                console.warn(
+                  "renderOnDemandCallback: selection is no longer valid, rebuilding correct DOM",
+                );
+                // our form div has changed (but the index is stable) so go and re-get the new domtree
+                const subForm = buildSubForms(e)[idx];
+                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();