From 49b916ba3baae48051dff84efc3ae313c0b6e655 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 24 Jan 2024 20:52:08 +0530
Subject: [PATCH] fix: set focus on input when cc or bcc is clicked

---
 frontend/src/components/CommunicationArea.vue | 20 ++++++++++++++++---
 .../components/Controls/MultiselectInput.vue  |  8 +++++++-
 frontend/src/components/EmailEditor.vue       | 16 ++++++++++++++-
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index bed61237..65cffda2 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -21,12 +21,12 @@
     <div v-if="showCommunicationBox" class="flex gap-1.5">
       <Button
         label="CC"
-        @click="newEmailEditor.cc = !newEmailEditor.cc"
+        @click="toggleCC()"
         :class="[newEmailEditor.cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
       />
       <Button
         label="BCC"
-        @click="newEmailEditor.bcc = !newEmailEditor.bcc"
+        @click="toggleBCC()"
         :class="[newEmailEditor.bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
       />
     </div>
@@ -66,7 +66,7 @@ import EmailEditor from '@/components/EmailEditor.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import { usersStore } from '@/stores/users'
 import { call } from 'frappe-ui'
-import { ref, watch, computed, defineModel } from 'vue'
+import { ref, watch, computed, defineModel, nextTick } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -144,5 +144,19 @@ async function submitComment() {
   emit('scroll')
 }
 
+function toggleCC() {
+  newEmailEditor.value.cc = !newEmailEditor.value.cc
+  newEmailEditor.value.cc && nextTick(() => {
+    newEmailEditor.value.ccInput.setFocus()
+  })
+}
+
+function toggleBCC() {
+  newEmailEditor.value.bcc = !newEmailEditor.value.bcc
+  newEmailEditor.value.bcc && nextTick(() => {
+    newEmailEditor.value.bccInput.setFocus()
+  })
+}
+
 defineExpose({ show: showCommunicationBox, editor: newEmailEditor })
 </script>
diff --git a/frontend/src/components/Controls/MultiselectInput.vue b/frontend/src/components/Controls/MultiselectInput.vue
index 4de5f905..c7704032 100644
--- a/frontend/src/components/Controls/MultiselectInput.vue
+++ b/frontend/src/components/Controls/MultiselectInput.vue
@@ -202,11 +202,17 @@ const removeLastValue = () => {
         emailRef = emails.value[emails.value.length - 1].$el
         emailRef.focus()
       } else {
-        search.value.$el.focus()
+        setFocus()
       }
     })
   } else {
     emailRef.focus()
   }
 }
+
+function setFocus() {
+  search.value.$el.focus()
+}
+
+defineExpose({ setFocus })
 </script>
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index b117172e..8531748a 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -35,6 +35,7 @@
       >
         <span class="text-xs text-gray-500">CC:</span>
         <MultiselectInput
+          ref="ccInput"
           class="flex-1"
           v-model="ccEmails"
           :validate="validateEmail"
@@ -44,6 +45,7 @@
       <div v-if="bcc" class="mx-10 flex items-center gap-2 border-b py-2.5">
         <span class="text-xs text-gray-500">BCC:</span>
         <MultiselectInput
+          ref="bccInput"
           class="flex-1"
           v-model="bccEmails"
           :validate="validateEmail"
@@ -173,6 +175,8 @@ const subject = ref(props.subject)
 const toEmails = ref(modelValue.value.email ? [modelValue.value.email] : [])
 const ccEmails = ref([])
 const bccEmails = ref([])
+const ccInput = ref(null)
+const bccInput = ref(null)
 
 const editor = computed(() => {
   return textEditor.value.editor
@@ -182,7 +186,17 @@ function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment)
 }
 
-defineExpose({ editor, subject, cc, bcc, toEmails, ccEmails, bccEmails })
+defineExpose({
+  editor,
+  subject,
+  cc,
+  bcc,
+  toEmails,
+  ccEmails,
+  bccEmails,
+  ccInput,
+  bccInput,
+})
 
 const textEditorMenuButtons = [
   'Paragraph',