feat: scroll to end on overflow

packages/nc-gui/components/workspace/InviteSection.vue

@@ -7,6 +7,10 @@ const inviteData = reactive({
   roles: WorkspaceUserRoles.VIEWER,
 })
 
+const focusRef = ref<HTMLInputElement>()
+
+const divRef = ref<HTMLDivElement>()
+
 const workspaceStore = useWorkspace()
 
 const { inviteCollaborator: _inviteCollaborator } = workspaceStore
@@ -22,6 +26,18 @@ watch(inviteData, (newVal) => {
   }
 })
 
+const scrollToEnd = () => {
+  if (divRef.value) {
+    const maxScrollLeft = divRef.value.scrollWidth - divRef.value.clientWidth
+    divRef.value.scrollLeft = maxScrollLeft
+  }
+}
+
+const handleEnter = () => {
+  inviteData.email += ','
+  scrollToEnd()
+}
+
 const inviteCollaborator = async () => {
   try {
     let inviteEmails = ''
@@ -31,11 +47,10 @@ const inviteCollaborator = async () => {
 
     await _inviteCollaborator(inviteEmails, inviteData.roles)
     message.success('Invitation sent successfully')
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
     inviteData.email = ''
     emailBadges.value = []
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 // allow only lower roles to be assigned
@@ -58,23 +73,29 @@ onMounted(async () => {
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
     <div class="text-xl mb-4">Invite</div>
-    <a-form>
     <div class="flex gap-2">
-        <a-input
-          id="email"
-          v-model:value="inviteData.email"
-          placeholder="Enter emails to send invitation"
-          class="!max-w-130 !rounded"
-          @press-enter="inviteData.email += ','"
-        />
+      <div
+        ref="divRef"
+        class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md overflow-hidden"
+        @click="focusRef?.focus"
+      >
         <span
           v-for="(email, index) in emailBadges"
           :key="email"
-          class="p-1 border-1 border-grey rounded-2xl flex items-center justify-between"
+          class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1"
         >
           {{ email }}
           <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
         </span>
+        <input
+          id="email"
+          ref="focusRef"
+          v-model="inviteData.email"
+          :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
+          class="!border-none !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full"
+          @keyup.enter="handleEnter"
+        />
+      </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>
           <MdiChevronDown />
@@ -101,7 +122,6 @@ onMounted(async () => {
         </div>
       </NcButton>
     </div>
-    </a-form>
   </div>
 </template>