From d238af4573b52cc1a3586214ef297675eee1c0c0 Mon Sep 17 00:00:00 2001
From: Huy Nguyen Quang <huyryze2419@gmail.com>
Date: Thu, 12 Jun 2025 09:34:04 +0700
Subject: [PATCH] refactor: use Stimulus controller instead of inline script
 for chat input focus

---
 app/javascript/controllers/chat_controller.js    |  6 ++++++
 .../controllers/focus_chat_input_controller.js   | 16 ++++++++++++++++
 app/views/messages/create.turbo_stream.erb       | 13 +++----------
 3 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/controllers/focus_chat_input_controller.js

diff --git a/app/javascript/controllers/chat_controller.js b/app/javascript/controllers/chat_controller.js
index 7e067309..cb8ce355 100644
--- a/app/javascript/controllers/chat_controller.js
+++ b/app/javascript/controllers/chat_controller.js
@@ -57,4 +57,10 @@ export default class extends Controller {
   #scrollToBottom = () => {
     this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight;
   };
+
+  focusInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.focus();
+    }
+  }
 }
diff --git a/app/javascript/controllers/focus_chat_input_controller.js b/app/javascript/controllers/focus_chat_input_controller.js
new file mode 100644
index 00000000..0123e07f
--- /dev/null
+++ b/app/javascript/controllers/focus_chat_input_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const chatController = this.application.getControllerForElementAndIdentifier(
+      document.querySelector('[data-controller~="chat"]'),
+      "chat"
+    );
+    
+    if (chatController) {
+      chatController.focusInput();
+    }
+    
+    this.element.remove();
+  }
+}
\ No newline at end of file
diff --git a/app/views/messages/create.turbo_stream.erb b/app/views/messages/create.turbo_stream.erb
index 4bfd9b63..edfd5659 100644
--- a/app/views/messages/create.turbo_stream.erb
+++ b/app/views/messages/create.turbo_stream.erb
@@ -8,14 +8,7 @@
   <%= render "messages/chat_form", chat: @chat %>
 <% end %>
 
-<%# Focus the input after form replacement %>
-<%= turbo_stream.after "chat-form" do %>
-  <script>
-    requestAnimationFrame(() => {
-      const textarea = document.querySelector('[data-chat-target="input"]');
-      if (textarea) {
-        textarea.focus();
-      }
-    });
-  </script>
+<%# Focus the input after form replacement using Stimulus %>
+<%= turbo_stream.append "messages" do %>
+  <div data-controller="focus-chat-input"></div>
 <% end %>
\ No newline at end of file