From 9711a8e1e5b556d2c9fdad12b23c2dc3b22b2fb1 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 27 Oct 2025 13:24:30 -0500
Subject: [PATCH] Prevent empty submit on reaction input

---
 app/assets/stylesheets/reactions.css             |  4 ++++
 .../cards/comments/reactions/_menu.html.erb      | 16 +---------------
 .../cards/comments/reactions/_reactions.html.erb |  7 ++++++-
 app/views/cards/comments/reactions/new.html.erb  |  8 +++++---
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 3279c1ac6..97ea1d66d 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -12,6 +12,10 @@
     inline-size: 100%;
     margin-block-start: calc(var(--block-space-half) / 2);
     margin-inline: calc(var(--column-gap) / -1);
+
+    &:has([open]) {
+      z-index: var(--z-popup);
+    }
   }
 
   .reactions__list {
diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb
index 016a510cf..75d2d2804 100644
--- a/app/views/cards/comments/reactions/_menu.html.erb
+++ b/app/views/cards/comments/reactions/_menu.html.erb
@@ -6,22 +6,8 @@
   <dialog class="reactions__popup popup panel fill-white shadow" data-dialog-target="dialog">
     <div class="reactions__emoji-list">
       <% EmojiHelper::REACTIONS.each do |character, title| %>
-        <%= form_with model: [ comment.card, comment, Reaction.new ], data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close"} do |form| %>
-          <%= hidden_field_tag "reaction[content]", character %>
-          <%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle", data: { emoji: character } do %>
-            <span><%= character %></span>
-          <% end %>
-        <% end %>
+        <%= tag.button character, title: title, class: "reactions__emoji-btn btn btn--circle", data: { emoji: character } %>
       <% end %>
-
-      <div class="flex-inline" data-controller="soft-keyboard">
-        <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
-              class: "btn btn--circle", action: "soft-keyboard#open",
-              data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
-          <%= icon_tag "reaction" %>
-          <span class="for-screen-reader">Add your own reaction</span>
-        <% end %>
-      </div>
     </div>
   </dialog>
 </div>
diff --git a/app/views/cards/comments/reactions/_reactions.html.erb b/app/views/cards/comments/reactions/_reactions.html.erb
index 209caab09..8e63e678f 100644
--- a/app/views/cards/comments/reactions/_reactions.html.erb
+++ b/app/views/cards/comments/reactions/_reactions.html.erb
@@ -5,7 +5,12 @@
     </div>
 
     <%= turbo_frame_tag comment, :new_reaction do %>
-      <%= render "cards/comments/reactions/menu", comment: comment %>
+      <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
+            class: "btn btn--circle", action: "soft-keyboard#open",
+            data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %>
+        <%= icon_tag "reaction" %>
+        <span class="for-screen-reader">Add your own reaction</span>
+      <% end %>
     <% end %>
   </div>
 <% end %>
diff --git a/app/views/cards/comments/reactions/new.html.erb b/app/views/cards/comments/reactions/new.html.erb
index 5f6f57b03..9538e713e 100644
--- a/app/views/cards/comments/reactions/new.html.erb
+++ b/app/views/cards/comments/reactions/new.html.erb
@@ -2,17 +2,19 @@
   <%= form_with model: [ @comment.card, @comment, Reaction.new ],
         class: "reaction reaction__form expanded",
         html: { aria: { label: "New reaction" } },
-        data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
+        data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel submit->form#preventEmptySubmit" } do |form| %>
     <label class="reaction__form-label flex gap" style="--column-gap: 0.4ch;">
       <figure class="reaction__avatar margin-none flex-item-no-shrink">
         <%= avatar_tag Current.user %>
       </figure>
 
       <%= form.text_field :content, autofocus: true, autocomplete: "off", autocorrect: "off", maxlength: 16,
-            required: true, pattern: /\S+.*/, class: "input reaction__input txt-small", aria: { label: "Add a reaction" } %>
+            pattern: /\S+.*/, class: "input reaction__input txt-small", data: { form_target: "input" }, aria: { label: "Add a reaction" } %>
     </label>
 
-    <%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit" do %>
+    <%= render "cards/comments/reactions/menu", comment: @comment %>
+
+    <%= form.button class: "btn btn--circle borderless btn--reversed", type: "submit", data: { form_target: "submit" } do %>
       <%= icon_tag "check" %> <span class="for-screen-reader">Submit</span>
     <% end %>