diff --git a/app/javascript/controllers/reaction_emoji_controller.js b/app/javascript/controllers/reaction_emoji_controller.js
new file mode 100644
index 000000000..b792a2a0c
--- /dev/null
+++ b/app/javascript/controllers/reaction_emoji_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input" ]
+
+  insertEmoji(event) {
+    const emojiChar = event.target.getAttribute("data-emoji")
+    this.inputTarget.value = emojiChar
+  }
+}
diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb
index 75d2d2804..9d2677b4b 100644
--- a/app/views/cards/comments/reactions/_menu.html.erb
+++ b/app/views/cards/comments/reactions/_menu.html.erb
@@ -6,7 +6,7 @@
   <dialog class="reactions__popup popup panel fill-white shadow" data-dialog-target="dialog">
     <div class="reactions__emoji-list">
       <% EmojiHelper::REACTIONS.each do |character, title| %>
-        <%= tag.button character, title: title, class: "reactions__emoji-btn btn btn--circle", data: { emoji: character } %>
+        <%= tag.button character, title: title, class: "reactions__emoji-btn btn btn--circle", data: { action: "reaction-emoji#insertEmoji", emoji: character } %>
       <% end %>
     </div>
   </dialog>
diff --git a/app/views/cards/comments/reactions/new.html.erb b/app/views/cards/comments/reactions/new.html.erb
index 9538e713e..8096b9913 100644
--- a/app/views/cards/comments/reactions/new.html.erb
+++ b/app/views/cards/comments/reactions/new.html.erb
@@ -2,14 +2,14 @@
   <%= 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 submit->form#preventEmptySubmit" } do |form| %>
+        data: { controller: "form reaction-emoji", 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,
-            pattern: /\S+.*/, class: "input reaction__input txt-small", data: { form_target: "input" }, aria: { label: "Add a reaction" } %>
+            pattern: /\S+.*/, class: "input reaction__input txt-small", data: { form_target: "input", reaction_emoji_target: "input" }, aria: { label: "Add a reaction" } %>
     </label>
 
     <%= render "cards/comments/reactions/menu", comment: @comment %>