fix: use multi select email input in invite member settings

frontend/components.d.ts

@@ -150,8 +150,7 @@ declare module 'vue' {
     MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
     MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
     MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
-    MultiselectInput: typeof import('./src/components/Controls/MultiselectInput.vue')['default']
-    MultiValueInput: typeof import('./src/components/Controls/MultiValueInput.vue')['default']
+    MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
     NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
     NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']

frontend/src/components/Controls/MultiSelectEmailInput.vue

@@ -8,7 +8,10 @@
         :label="value"
         theme="gray"
         variant="subtle"
-        class="rounded"
+        :class="{
+          'rounded bg-surface-white hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4':
+            variant === 'subtle',
+        }"
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>
@@ -25,7 +28,14 @@
             <template #target="{ togglePopover }">
               <ComboboxInput
                 ref="search"
-                class="search-input form-input w-full border-none bg-surface-white hover:bg-surface-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+                class="search-input form-input w-full border-none focus:border-none focus:!shadow-none focus-visible:!ring-0"
+                :class="[
+                  variant == 'ghost'
+                    ? 'bg-surface-white hover:bg-surface-white'
+                    : 'bg-surface-gray-2 hover:bg-surface-gray-3',
+                  inputClass,
+                ]"
+                :placeholder="placeholder"
                 type="text"
                 :value="query"
                 @change="
@@ -84,6 +94,12 @@
       </div>
     </div>
     <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
+    <div
+      v-if="info"
+      class="whitespace-pre-line text-sm text-ink-blue-3 mt-2 pl-2"
+    >
+      {{ info }}
+    </div>
   </div>
 </template>
 
@@ -105,6 +121,18 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  variant: {
+    type: String,
+    default: 'subtle',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  inputClass: {
+    type: String,
+    default: '',
+  },
   errorMessage: {
     type: Function,
     default: (value) => `${value} is an Invalid value`,
@@ -116,6 +144,7 @@ const values = defineModel()
 const emails = ref([])
 const search = ref(null)
 const error = ref(null)
+const info = ref(null)
 const query = ref('')
 const text = ref('')
 const showOptions = ref(false)
@@ -181,6 +210,7 @@ function reload(val) {
 
 const addValue = (value) => {
   error.value = null
+  info.value = null
   if (value) {
     const splitValues = value.split(',')
     splitValues.forEach((value) => {
@@ -191,6 +221,7 @@ const addValue = (value) => {
           // check if value is valid
           if (value && props.validate && !props.validate(value)) {
             error.value = props.errorMessage(value)
+            query.value = value
             return
           }
           // add value to values array
@@ -200,6 +231,8 @@ const addValue = (value) => {
             values.value.push(value)
           }
           value = value.replace(value, '')
+        } else {
+          info.value = __('email already exists')
         }
       }
     })

frontend/src/components/Controls/MultiValueInput.vue

@@ -1,126 +0,0 @@
-<template>
-  <div>
-    <div
-      class="group flex flex-wrap gap-1 min-h-20 p-1.5 cursor-text rounded h-7 text-base bg-surface-gray-2 hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full"
-      @click="setFocus"
-    >
-      <Button
-        ref="emails"
-        v-for="value in values"
-        :key="value"
-        :label="value"
-        theme="gray"
-        variant="subtle"
-        class="rounded bg-surface-white hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4"
-        @keydown.delete.capture.stop="removeLastValue"
-      >
-        <template #suffix>
-          <FeatherIcon
-            class="h-3.5"
-            name="x"
-            @click.stop="removeValue(value)"
-          />
-        </template>
-      </Button>
-      <div class="flex-1">
-        <input
-          ref="search"
-          class="w-full border-none h-7 text-base bg-surface-gray-2 group-hover:bg-surface-gray-3 focus:border-none focus:!shadow-none focus-visible:!ring-0 transition-colors"
-          type="text"
-          v-model="query"
-          placeholder="example@email.com"
-          @keydown.enter.capture.stop="addValue()"
-          @keydown.delete.capture.stop="removeLastValue"
-        />
-      </div>
-    </div>
-    <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
-    <p v-if="description" class="text-xs text-ink-gray-5 mt-1.5">
-      {{ description }}
-    </p>
-  </div>
-</template>
-
-<script setup>
-import { ref, nextTick } from 'vue'
-
-const props = defineProps({
-  validate: {
-    type: Function,
-    default: null,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  errorMessage: {
-    type: Function,
-    default: (value) => `${value} is an Invalid value`,
-  },
-})
-
-const values = defineModel()
-
-const emails = ref([])
-const search = ref(null)
-const error = ref(null)
-const query = ref('')
-
-const addValue = () => {
-  let value = query.value
-  error.value = null
-  if (value) {
-    const splitValues = value.split(',')
-    splitValues.forEach((value) => {
-      value = value.trim()
-      if (value) {
-        // check if value is not already in the values array
-        if (!values.value?.includes(value)) {
-          // check if value is valid
-          if (value && props.validate && !props.validate(value)) {
-            error.value = props.errorMessage(value)
-            return
-          }
-          // add value to values array
-          if (!values.value) {
-            values.value = [value]
-          } else {
-            values.value.push(value)
-          }
-          value = value.replace(value, '')
-        }
-      }
-    })
-    !error.value && (query.value = '')
-  }
-}
-
-const removeValue = (value) => {
-  values.value = values.value.filter((v) => v !== value)
-}
-
-const removeLastValue = () => {
-  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()
-  }
-}
-
-function setFocus() {
-  search.value.focus()
-}
-
-defineExpose({ setFocus })
-</script>

frontend/src/components/EmailEditor.vue

@@ -20,8 +20,9 @@
       <div class="flex flex-col gap-3">
         <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t pt-2.5">
           <span class="text-xs text-ink-gray-4">{{ __('TO') }}:</span>
-          <MultiselectInput
+          <MultiSelectEmailInput
             class="flex-1"
+            variant="ghost"
             v-model="toEmails"
             :validate="validateEmail"
             :error-message="
@@ -53,9 +54,10 @@
         </div>
         <div v-if="cc" class="sm:mx-10 mx-4 flex items-center gap-2">
           <span class="text-xs text-ink-gray-4">{{ __('CC') }}:</span>
-          <MultiselectInput
+          <MultiSelectEmailInput
             ref="ccInput"
             class="flex-1"
+            variant="ghost"
             v-model="ccEmails"
             :validate="validateEmail"
             :error-message="
@@ -65,9 +67,10 @@
         </div>
         <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2">
           <span class="text-xs text-ink-gray-4">{{ __('BCC') }}:</span>
-          <MultiselectInput
+          <MultiSelectEmailInput
             ref="bccInput"
             class="flex-1"
+            variant="ghost"
             v-model="bccEmails"
             :validate="validateEmail"
             :error-message="
@@ -176,7 +179,7 @@ import SmileIcon from '@/components/Icons/SmileIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
-import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
+import MultiSelectEmailInput from '@/components/Controls/MultiSelectEmailInput.vue'
 import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue'
 import { TextEditorBubbleMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { capture } from '@/telemetry'

frontend/src/components/Settings/InviteMemberPage.vue

@@ -8,14 +8,20 @@
         <label class="block text-xs text-ink-gray-5 mb-1.5">
           {{ __('Invite by email') }}
         </label>
-        <MultiValueInput
-          v-model="invitees"
-          :validate="validateEmail"
-          :error-message="
-            (value) => __('{0} is an invalid email address', [value])
-          "
-          :description="__('Press enter to add email')"
-        />
+        <div
+          class="p-2 group bg-surface-gray-2 hover:bg-surface-gray-3 rounded"
+        >
+          <MultiSelectEmailInput
+            class="flex-1"
+            inputClass="!bg-surface-gray-2 hover:!bg-surface-gray-3 group-hover:!bg-surface-gray-3"
+            :placeholder="__('john@doe.com')"
+            v-model="invitees"
+            :validate="validateEmail"
+            :error-message="
+              (value) => __('{0} is an invalid email address', [value])
+            "
+          />
+        </div>
         <FormControl
           type="select"
           class="mt-4"
@@ -81,7 +87,7 @@
   </div>
 </template>
 <script setup>
-import MultiValueInput from '@/components/Controls/MultiValueInput.vue'
+import MultiSelectEmailInput from '@/components/Controls/MultiSelectEmailInput.vue'
 import { validateEmail, convertArrayToString } from '@/utils'
 import {
   createListResource,