Merge pull request #1850 from basecamp/column-dialog-issues

Capture key presses inside the column edit form to prevent interferences with column navigation

Author: jorgemanrubia

app/javascript/controllers/dialog_controller.js

@@ -57,4 +57,8 @@ export default class extends Controller {
   loadLazyFrames() {
     Array.from(this.dialogTarget.querySelectorAll("turbo-frame")).forEach(frame => { frame.loading = "eager" })
   }
+
+  captureKey(event) {
+    if (event.key !== "Escape") { event.stopPropagation() }
+  }
 }

app/views/boards/show/menu/_column_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with model: [board, column], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
+<%= form_with model: [board, column], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset keydown->dialog#captureKey" } do |form| %>
   <%= form.text_field :name, class: "input", placeholder: "Name this column", value: column.name,
         required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>