gavin/maybe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 28 Wiki Activity

fix: maintain chat input focus after sending message #2360

Closed
quanghuynguyen1902 wants to merge 2 commits from fix/ai-input-focus into main
pull from: fix/ai-input-focus
merge into: gavin:main
Conversation 4 Commits 2 Files Changed 4 +40 -1
quanghuynguyen1902 commented 2025-06-11 23:51:16 +08:00 (Migrated from github.com)
Copy Link

This PR fixes the issue where the chat input field loses focus after sending a message, requiring users to click back into the field to continue typing.

Changes

  • Updated MessagesController#create to respond with Turbo Streams instead of redirecting
  • Created create.turbo_stream.erb to handle the async form submission
  • Replaced the chat form with a fresh version to clear the input
  • Added JavaScript to refocus the input after form replacement

Testing

  1. Go to the AI chat interface
  2. Type a message and press Enter
  3. Verify that:
    • The message is sent successfully
    • The input field is cleared
    • The input field maintains focus (cursor remains in the
      field)
    • You can immediately type another message without clicking

Demo

https://github.com/user-attachments/assets/b8c3b418-aef7-4738-899e-468ff64af61b

Related Issues

Fixes #2335

This PR fixes the issue where the chat input field loses focus after sending a message, requiring users to click back into the field to continue typing. ## Changes - Updated `MessagesController#create` to respond with Turbo Streams instead of redirecting - Created `create.turbo_stream.erb` to handle the async form submission - Replaced the chat form with a fresh version to clear the input - Added JavaScript to refocus the input after form replacement ## Testing 1. Go to the AI chat interface 2. Type a message and press Enter 3. Verify that: - The message is sent successfully - The input field is cleared - The input field maintains focus (cursor remains in the field) - You can immediately type another message without clicking ## Demo https://github.com/user-attachments/assets/b8c3b418-aef7-4738-899e-468ff64af61b ## Related Issues Fixes #2335
Shpigford (Migrated from github.com) reviewed 2025-06-12 09:24:28 +08:00
app/views/messages/create.turbo_stream.erb
@@ -0,0 +1,14 @@
<%# Add thinking indicator to messages area %>
Shpigford (Migrated from github.com) commented 2025-06-12 09:24:28 +08:00
Copy Link

Generally prefer to not use <script> tags in this way. Should make use of Rails javascript conventions with Stimulus.

Generally prefer to not use `<script>` tags in this way. Should make use of Rails javascript conventions with Stimulus.
cursor[bot] commented 2025-06-12 10:34:36 +08:00 (Migrated from github.com)
Copy Link

🚨 BugBot couldn't run

Pull requests from forked repositories are not yet supported (requestId: serverGenReqId_96cea5c4-1dc9-4dff-aeb4-a7518e95b5f4).

<h3>🚨 BugBot couldn't run</h3> Pull requests from forked repositories are not yet supported (requestId: serverGenReqId_96cea5c4-1dc9-4dff-aeb4-a7518e95b5f4).
quanghuynguyen1902 (Migrated from github.com) reviewed 2025-06-12 10:35:27 +08:00
app/views/messages/create.turbo_stream.erb
@@ -0,0 +1,14 @@
<%# Add thinking indicator to messages area %>
quanghuynguyen1902 (Migrated from github.com) commented 2025-06-12 10:35:27 +08:00
Copy Link

I'll update now

I'll update now
zachgoll (Migrated from github.com) reviewed 2025-06-16 22:03:45 +08:00
app/views/messages/create.turbo_stream.erb
@@ -0,0 +11,4 @@
<%# Focus the input after form replacement using Stimulus %>
<%= turbo_stream.append "messages" do %>
<div data-controller="focus-chat-input"></div>
<% end %>
zachgoll (Migrated from github.com) commented 2025-06-16 22:03:41 +08:00
Copy Link

I'm wondering if this stream is necessary. If we're pushing a replacement to the chat-form above, could we just auto-focus the form every time it mounts to the DOM?

Maybe in chat-controller, we listen for "form connected callback" and then trigger a focus? I believe that would work since we're pushing a brand new instance of the form here.

I'm wondering if this stream is necessary. If we're pushing a replacement to the `chat-form` above, could we just auto-focus the form every time it mounts to the DOM? Maybe in chat-controller, we listen for "form connected callback" and then trigger a focus? I believe that would work since we're pushing a brand new instance of the form here.

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Shpigford
quanghuynguyen1902
zachgoll
Labels
Clear labels
📆 Planned
Not ready to be worked on yet, but planned for future
 💻 Self Hosted only
Issues pertaining to self-hosted versions of Maybe
 ⚙️ Config
ℹ️ Needs info
Further information is requested
 📱 Mobile
Bugs exclusively happening on mobile devices
 1️⃣ High Priority
High priority issues will be worked on next
 🚨 Urgent
Issues that are urgent for app functionality
 3️⃣ Low priority
Contributions accepted, but Maybe team will not be working on this in the near term
 2️⃣ Medium Priority
Community contributions accepted, Maybe team only works on if there are no high priority items open
 ⚡ Performance
Performance issues to address
 🎨 UI / UX
Issues related to UI / UX interactions and design.
 💎 Bounty
💰 Rewarded
📊 Data issue
Issues where the app functionally works, but the data is missing or inaccurate.
 🙋 Bounty claim
$1.5K
Community
This is a great issue for community members to work on
 dependencies
Pull requests that update a dependency file
 Design
Hosted only
Hosted app only
 Required self hoster data migration
Self hosters must run data migrations to resolve this issue
 ruby
Pull requests that update Ruby code
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
gavin
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: gavin/maybe#2360
Delete Branch "fix/ai-input-focus"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?