Submit chat comment with enter

axelclark · Apr 20, 2024 · e0cd185 · e0cd185
1 parent 34e7367
commit e0cd185
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -61,6 +61,11 @@ window.addEventListener(`phx:animate`, (e) => {
   }
 })
 
+window.addEventListener(`phx:clear-textarea`, (e) => {
+  let el = document.getElementById(e.detail.id)
+  el.value = ""
+})
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 

diff --git a/assets/js/hooks/enter-submit-hook.js b/assets/js/hooks/enter-submit-hook.js
@@ -0,0 +1,14 @@
+const EnterSubmitHook = {
+  mounted() {
+    this.el.addEventListener("keydown", (e) => {
+      if (e.key == "Enter" && e.shiftKey == false) {
+        this.el.form.dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true })
+        )
+        this.el.value = ""
+      }
+    })
+  },
+}
+
+export default EnterSubmitHook
diff --git a/assets/js/hooks/index.js b/assets/js/hooks/index.js
@@ -1,9 +1,11 @@
-import SortableInputsFor from "./sortable-hooks"
 import ChatScrollToBottom from "./chat-hooks"
+import EnterSubmitHook from "./enter-submit-hook"
 import LocalTimeHook from "./local-time-hooks"
+import SortableInputsFor from "./sortable-hooks"
 
 export default {
-  SortableInputsFor,
   ChatScrollToBottom,
+  EnterSubmitHook,
   LocalTimeHook,
+  SortableInputsFor,
 }
diff --git a/lib/ex338_web/live/championship_live/chat_component.ex b/lib/ex338_web/live/championship_live/chat_component.ex
@@ -36,7 +36,10 @@ defmodule Ex338Web.ChampionshipLive.ChatComponent do
 
     case Chats.create_message(message_params) do
       {:ok, _message} ->
-        {:noreply, push_patch(socket, to: socket.assigns.patch)}
+        {:noreply,
+         socket
+         |> push_event("clear-textarea", %{id: "message_content"})
+         |> push_patch(to: socket.assigns.patch)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign_form(socket, changeset)}
@@ -66,11 +69,11 @@ defmodule Ex338Web.ChampionshipLive.ChatComponent do
           <label for="comment" class="sr-only">Add your comment</label>
           <.input
             field={@form[:content]}
-            phx-debounce="blur"
             type="commenttextarea"
             rows="2"
             class="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
             placeholder="Add your comment..."
+            phx-hook="EnterSubmitHook"
           />
         </div>