From 251e9980fdc9026882192c6da5da33ff27b40fa2 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Fri, 20 Mar 2026 16:59:27 +0530 Subject: [PATCH] chore: Auto-focus editor when replying to a message (#13857) # Pull Request Template ## Description This PR adds support to auto-focus the editor when clicking reply to this message, the editor now automatically receives focus so users can start typing immediately. Fixes https://linear.app/chatwoot/issue/CW-6661/typing-box-not-focused-after-clicking-reply-to-message ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Screencast https://github.com/user-attachments/assets/c5e77055-3f68-4ad8-934e-cfc465166e8a ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --- .../components/widgets/WootWriter/Editor.vue | 2 ++ .../components/widgets/conversation/ReplyBox.vue | 16 ++++++++++++++-- .../widgets/conversation/ReplyToMessage.vue | 1 + 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue index 7615d3693..2a9577644 100644 --- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue +++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue @@ -828,6 +828,8 @@ onMounted(() => { } }); +defineExpose({ focusEditorInputField }); + // BUS Event to insert text or markdown into the editor at the // current cursor position. // Components using this diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index c11aff8b0..dd2e7a607 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -99,6 +99,7 @@ export default { } = useUISettings(); const replyEditor = useTemplateRef('replyEditor'); + const messageEditor = useTemplateRef('messageEditor'); const copilot = useCopilotReply(); const shortcutKey = useKbd(['$mod', '+', 'enter']); @@ -109,6 +110,7 @@ export default { setQuotedReplyFlagForInbox, fetchQuotedReplyFlagFromUISettings, replyEditor, + messageEditor, copilot, shortcutKey, }; @@ -507,7 +509,7 @@ export default { ); this.fetchAndSetReplyTo(); - emitter.on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo); + emitter.on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.onReplyToMessage); // A hacky fix to solve the drag and drop // Is showing on top of new conversation modal drag and drop @@ -522,7 +524,7 @@ export default { unmounted() { document.removeEventListener('paste', this.onPaste); document.removeEventListener('keydown', this.handleKeyEvents); - emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo); + emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.onReplyToMessage); emitter.off(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor); emitter.off( BUS_EVENTS.NEW_CONVERSATION_MODAL, @@ -1191,6 +1193,15 @@ export default { return false; }); }, + onReplyToMessage() { + this.fetchAndSetReplyTo(); + if (this.inReplyTo) { + this.$nextTick(() => { + const pos = this.isSignatureEnabledForInbox ? 'start' : 'end'; + this.messageEditor?.focusEditorInputField(pos); + }); + } + }, resetReplyToMessage() { const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO; LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId); @@ -1313,6 +1324,7 @@ export default { />