From 49f0e52043be13151425617a0dc6207f0e7d80ee Mon Sep 17 00:00:00 2001
From: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:21:29 +0200
Subject: [PATCH] Handle ENTER key correctly in trigger form and allow manual
 JSON (#42525)

(cherry picked from commit 3ef29a641a852c076da7a9611c325669e8485368)
---
 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 2ded629240146..7a3444f460f41 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 1d27acc4fd99e..158b54cabaf69 100644
--- a/airflow/www/templates/airflow/trigger.html
+++ b/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 }}">