Handle ENTER key correctly in trigger form and allow manual JSON (apa…

…che#42525)

(cherry picked from commit 3ef29a6)

airflow/www/static/js/trigger.js

@@ -96,6 +96,33 @@ function updateJSONconf() {
   jsonForm.setValue(JSON.stringify(params, null, 4));
 }
 
+/**
+ * If the user hits ENTER key inside an input, ensure JSON data is updated.
+ */
+function handleEnter() {
+  updateJSONconf();
+  // somehow following is needed to enforce form is submitted correctly from CodeMirror
+  document.getElementById("json").value = jsonForm.getValue();
+}
+
+/**
+ * Track user changes in input fields, ensure JSON is updated when user presses enter
+ * See https://github.com/apache/airflow/issues/42157
+ */
+function enterInputField() {
+  const form = document.getElementById("trigger_form");
+  form.addEventListener("submit", handleEnter);
+}
+
+/**
+ * Stop tracking user changes in input fields
+ */
+function leaveInputField() {
+  const form = document.getElementById("trigger_form");
+  form.removeEventListener("submit", handleEnter);
+  updateJSONconf();
+}
+
 /**
  * Initialize the form during load of the web page
  */
@@ -148,7 +175,8 @@ function initForm() {
         } else if (elements[i].type === "checkbox") {
           elements[i].addEventListener("change", updateJSONconf);
         } else {
-          elements[i].addEventListener("blur", updateJSONconf);
+          elements[i].addEventListener("focus", enterInputField);
+          elements[i].addEventListener("blur", leaveInputField);
         }
       }
     }

airflow/www/templates/airflow/trigger.html

@@ -165,7 +165,7 @@ <h2>
     <small class="text-muted">{{ dag.description[0:150] + '…' if dag.description and dag.description|length > 150 else dag.description|default('', true) }}</small>
   </h2>
   {{ dag_docs(doc_md, False) }}
-  <form method="POST" id="trigger_form" onsubmit="updateJSONconf();">
+  <form method="POST" id="trigger_form">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     <input type="hidden" name="dag_id" value="{{ dag_id }}">
     <input type="hidden" name="origin" value="{{ origin }}">