self employed keydown removal (#4839)

* use data attr for handler * refactor enter keydown listener to leverage event propagation to better handle AJAX elements --------- Co-authored-by: Ann Caballero <[email protected]>
ideacrew · Dec 17, 2024 · 6e62d9a · 6e62d9a
1 parent b3e4c1d
commit 6e62d9a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/app/assets/javascripts/keyboard_navigation.js b/app/assets/javascripts/keyboard_navigation.js
@@ -42,19 +42,15 @@ function handleContactInfoKeyDown(event, radioId, modifyDiv) {
 }
 
 document.addEventListener('turbolinks:load', () => {
-  /**
-   * Selects all elements in the document that have the attribute 'data-keydown-id'.
-   */
-  const elements = document.querySelectorAll('[data-keydown-id]');
-
-  elements.forEach((element) => {
-    const keydownId = element.dataset.keydownId;
-
-    element.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
-        clickElementById(keydownId);
-      }
-    });
+  // Use event propogation to handle `Enter` keydown events for HTML elements with the attribute `data-keydown-id`.
+  document.addEventListener('keydown', (event) => {
+    /*
+    * Trigger the click on the proxy element identified by the attribute.
+    */
+    const keydownId = event.target?.dataset?.keydownId;
+    if (event.key === 'Enter' && keydownId) {
+      clickElementById(keydownId);
+    }
   });
 });
 

diff --git a/...inancial_assistance/app/views/financial_assistance/incomes/_self_employed_income_form.erb b/...inancial_assistance/app/views/financial_assistance/incomes/_self_employed_income_form.erb
@@ -31,7 +31,7 @@
 
       <div class="row mb-2">
         <div class="pull-right mt-1 mb-2 pl-3">
-          <a tabindex="0" onkeydown="handleButtonKeyDown(event, 'self-employed-income-cancel-<%= income_id %>')" id="self-employed-income-cancel-<%= income_id %>" class="button btn-default outline income-cancel"><%= l10n("cancel") %></a>
+          <a tabindex="0" data-keydown-id='self-employed-income-cancel-<%= income_id %>' id="self-employed-income-cancel-<%= income_id %>" class="button btn-default outline income-cancel"><%= l10n("cancel") %></a>
           <%= f.submit l10n("faa.other_incomes.save"), class: "button btn-save ml-1", :data => { :cuke => "self-employed-income-save-button" }, onclick: "checkDate('#{income_id}')" %>
         </div>
       </div>