fix: added contact email dropdown in multiselectinput using search_link

crm/install.py

@@ -11,6 +11,7 @@ def after_install():
 	add_default_lead_statuses()
 	add_default_deal_statuses()
 	add_default_communication_statuses()
+	add_property_setter()
 	frappe.db.commit()
 
 def add_default_lead_statuses():
@@ -103,3 +104,13 @@ def add_default_communication_statuses():
 		doc = frappe.new_doc("CRM Communication Status")
 		doc.status = status
 		doc.insert()
+
+def add_property_setter():
+	if not frappe.db.exists("Property Setter", {"name": "Contact-main-search_fields"}):
+		doc = frappe.new_doc("Property Setter")
+		doc.doctype_or_field = "DocType"
+		doc.doc_type = "Contact"
+		doc.property = "search_fields"
+		doc.property_type = "Data"
+		doc.value = "email_id"
+		doc.insert()

frontend/src/components/Controls/MultiselectInput.vue

@@ -19,20 +19,84 @@
           />
         </template>
       </Button>
-      <TextInput
+      <div class="flex-1">
-        class="min-w-20 flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+        <Combobox v-model="selectedValue" nullable>
-        v-model="currentValue"
+          <Popover class="w-full" v-model:show="showOptions">
-        @keydown.enter.capture.stop="addValue"
+            <template #target="{ togglePopover }">
-        @keydown.tab.capture.stop="addValue"
+              <ComboboxInput
-        @keydown.delete.capture.stop="removeLastValue"
+                ref="search"
-      />
+                class="search-input form-input w-full border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+                type="text"
+                :value="query"
+                @change="
+                  (e) => {
+                    query = e.target.value
+                    showOptions = true
+                  }
+                "
+                autocomplete="off"
+                @focus="() => togglePopover()"
+                @keydown.delete.capture.stop="removeLastValue"
+              />
+            </template>
+            <template #body="{ isOpen }">
+              <div v-show="isOpen">
+                <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+                  <ComboboxOptions
+                    class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+                    static
+                  >
+                    <ComboboxOption
+                      v-for="option in options"
+                      :key="option.value"
+                      :value="option"
+                      v-slot="{ active }"
+                    >
+                      <li
+                        :class="[
+                          'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+                          { 'bg-gray-100': active },
+                        ]"
+                      >
+                        <UserAvatar
+                          class="mr-2"
+                          :user="option.value"
+                          size="lg"
+                        />
+                        <div class="flex flex-col gap-1 p-1 text-gray-800">
+                          <div class="text-base font-medium">
+                            {{ option.label }}
+                          </div>
+                          <div class="text-sm text-gray-600">
+                            {{ option.value }}
+                          </div>
+                        </div>
+                      </li>
+                    </ComboboxOption>
+                  </ComboboxOptions>
+                </div>
+              </div>
+            </template>
+          </Popover>
+        </Combobox>
+      </div>
     </div>
     <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
   </div>
 </template>
 
 <script setup>
-import { ref, defineModel } from 'vue'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { contactsStore } from '@/stores/contacts'
+import { Popover, createResource } from 'frappe-ui'
+import { ref, defineModel, computed, nextTick } from 'vue'
+import { watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
   validate: {
@@ -46,16 +110,87 @@ const props = defineProps({
 })
 
 const values = defineModel()
-const currentValue = ref('')
+
+const { getContactByName } = contactsStore()
 
 const emails = ref([])
 const search = ref(null)
 const error = ref(null)
+const query = ref('')
+const text = ref('')
+const showOptions = ref(false)
 
-const addValue = () => {
+const selectedValue = computed({
+  get: () => query.value || '',
+  set: (val) => {
+    query.value = ''
+    if (val) {
+      showOptions.value = false
+    }
+    val?.value && addValue(val.value)
+  },
+})
+
+watchDebounced(
+  query,
+  (val) => {
+    val = val || ''
+    if (text.value === val) return
+    text.value = val
+    reload(val)
+  },
+  { debounce: 300, immediate: true }
+)
+
+const filterOptions = createResource({
+  url: 'frappe.desk.search.search_link',
+  method: 'POST',
+  cache: [text.value, 'Contact'],
+  params: {
+    txt: text.value,
+    doctype: 'Contact',
+  },
+  transform: (data) => {
+    let allData = data
+      .filter((c) => {
+        return getContactByName(c.value).email_id
+      })
+      .map((option) => {
+        let c = getContactByName(option.value)
+        return {
+          label: c.full_name || c.email_id,
+          value: c.email_id,
+        }
+      })
+    return allData
+  },
+})
+
+const options = computed(() => {
+  let searchedContacts = filterOptions.data || []
+  if (!searchedContacts.length && query.value) {
+    searchedContacts.push({
+      label: query.value,
+      value: query.value,
+    })
+  }
+  return searchedContacts
+})
+
+function reload(val) {
+  filterOptions.update({
+    params: {
+      txt: val,
+      doctype: 'Contact',
+    },
+  })
+  filterOptions.reload()
+}
+
+const addValue = (value) => {
   error.value = null
-  if (currentValue.value) {
+  if (value) {
-    const splitValues = currentValue.value.split(',')
+    const splitValues = value.split(',')
     splitValues.forEach((value) => {
       value = value.trim()
       if (value) {
@@ -68,11 +203,11 @@ const addValue = () => {
           }
           // add value to values array
           values.value.push(value)
-          currentValue.value = currentValue.value.replace(value, '')
+          value = value.replace(value, '')
         }
       }
     })
-    !error.value && (currentValue.value = '')
+    !error.value && (value = '')
   }
 }
 
@@ -81,8 +216,21 @@ const removeValue = (value) => {
 }
 
 const removeLastValue = () => {
-  if (!currentValue.value) {
+  if (query.value) return
+
+  let emailRef = emails.value[emails.value.length - 1].$el
+  if (document.activeElement === emailRef) {
     values.value.pop()
+    nextTick(() => {
+      if (values.value.length) {
+        emailRef = emails.value[emails.value.length - 1].$el
+        emailRef.focus()
+      } else {
+        setFocus()
+      }
+    })
+  } else {
+    emailRef.focus()
   }
 }