From e9b58c72046337fad46bb5cdca9663dedb19cd63 Mon Sep 17 00:00:00 2001
From: Jens Scheffler <jens.scheffler@de.bosch.com>
Date: Thu, 26 Sep 2024 23:44:00 +0200
Subject: [PATCH] Handle ENTER key correctly in trigger form and allow manual
 JSON

---
 airflow/www/static/js/trigger.js           | 30 +++++++++++++++++++++-
 airflow/www/templates/airflow/trigger.html |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/airflow/www/static/js/trigger.js b/airflow/www/static/js/trigger.js
index 2ded62924014..7a3444f460f4 100644
--- a/airflow/www/static/js/trigger.js
+++ b/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);
         }
       }
     }
diff --git a/airflow/www/templates/airflow/trigger.html b/airflow/www/templates/airflow/trigger.html
index 71d09e79076f..7cdcd337bedd 100644
--- a/airflow/www/templates/airflow/trigger.html
+++ b/airflow/www/templates/airflow/trigger.html
@@ -163,7 +163,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 }}">