From 405258cff62b59f9034c07a26076c391f919661b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 26 Jan 2024 20:33:29 +0530
Subject: [PATCH] fix: focus on search when email templates modal is opened

---
 frontend/src/components/EmailEditor.vue               | 11 ++++-------
 .../components/Modals/EmailTemplateSelectorModal.vue  | 10 +++++++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index fdf56329..4c917283 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -2,8 +2,8 @@
   <TextEditor
     ref="textEditor"
     :editor-class="['prose-sm max-w-none', editable && 'min-h-[7rem]']"
-    :content="value"
-    @change="editable ? $emit('change', $event) : null"
+    :content="content"
+    @change="editable ? (content = $event) : null"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
     :placeholder="placeholder"
     :editable="editable"
@@ -144,10 +144,6 @@ import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel } from 'vue'
 
 const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
   placeholder: {
     type: String,
     default: null,
@@ -178,9 +174,9 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['change'])
 const modelValue = defineModel()
 const attachments = defineModel('attachments')
+const content = defineModel('content')
 
 const textEditor = ref(null)
 const cc = ref(false)
@@ -217,6 +213,7 @@ async function applyEmailTemplate(template) {
   }
 
   if (template.response) {
+    content.value = data.message
     editor.value.commands.setContent(data.message)
   }
   showEmailTemplateSelectorModal.value = false
diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index e71331f2..616a45e8 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -1,13 +1,14 @@
 <template>
   <Dialog v-model="show" :options="{ title: 'Email Templates', size: '4xl' }">
     <template #body-content>
-      <FormControl
+      <TextInput
+        ref="searchInput"
         v-model="search"
         type="text"
         class="mb-2 w-full"
         placeholder="Search"
       />
-      <div class="grid grid-cols-3 gap-2">
+      <div class="grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto">
         <div
           v-for="template in filteredTemplates"
           :key="template.name"
@@ -35,7 +36,7 @@
 
 <script setup>
 import { TextEditor, createListResource } from 'frappe-ui'
-import { defineModel, ref, computed } from 'vue'
+import { defineModel, ref, computed, nextTick, watch } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -45,6 +46,7 @@ const props = defineProps({
 })
 
 const show = defineModel()
+const searchInput = ref('')
 
 const emit = defineEmits(['apply'])
 
@@ -79,4 +81,6 @@ const filteredTemplates = computed(() => {
     }) ?? []
   )
 })
+
+watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()))
 </script>