chore: Remove vue-multiselect and migrate to next components (#13506)

# Pull Request Template ## Description This PR includes: 1. Removes multiselect usage from the Merge Contact modal (Conversation sidebar) and replaces it with the existing component used on the Contact Details page. 2. Replaces legacy form and multiselect elements in Add and Edit automations flows with next components.**(Also check Macros)** 3. Replace multiselect with ComboBox in contact form country field. 4. Replace multiselect with TagInput in create/edit attribute form. 5. Replace multiselect with TagInput for agent selection in inbox creation. 6. Replace multiselect with ComboBox in Facebook channel page selection ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? **Screenshots** 1. **Merge modal** <img width="741" height="449" alt="image" src="https://github.com/user-attachments/assets/a05a96ec-0692-4d94-9e27-d3e85fd143e4" /> <img width="741" height="449" alt="image" src="https://github.com/user-attachments/assets/fc1dc977-689d-4440-869d-2124e4ca9083" /> 2. **Automations** <img width="849" height="1089" alt="image" src="https://github.com/user-attachments/assets/b0155f06-ab21-4f90-a2c8-5bfbd97b08f7" /> <img width="813" height="879" alt="image" src="https://github.com/user-attachments/assets/0921ac4a-88f5-49ac-a776-cc02941b479c" /> <img width="849" height="826" alt="image" src="https://github.com/user-attachments/assets/44358dae-a076-4e10-b7ba-a4e40ccd817f" /> 3. **Country field** <img width="462" height="483" alt="image" src="https://github.com/user-attachments/assets/d5db9aa1-b859-4327-9960-957d7091678f" /> 4. **Add/Edit attribute form** <img width="619" height="646" alt="image" src="https://github.com/user-attachments/assets/6ab2ea94-73e5-40b8-ac29-399c0543fa7b" /> <img width="619" height="646" alt="image" src="https://github.com/user-attachments/assets/b4c5bb0e-baa0-4ef7-a6a2-adb0f0203243" /> <img width="635" height="731" alt="image" src="https://github.com/user-attachments/assets/74890c80-b213-4567-bf5f-4789dda39d2d" /> 5. **Agent selection in inbox creation** <img width="635" height="534" alt="image" src="https://github.com/user-attachments/assets/0003bad1-1a75-4f20-b014-587e1c19a620" /> <img width="809" height="602" alt="image" src="https://github.com/user-attachments/assets/5e7ab635-7340-420a-a191-e6cd49c02704" /> 7. **Facebook channel page selection** <img width="597" height="444" alt="image" src="https://github.com/user-attachments/assets/f7ec8d84-0a7d-4bc6-92a1-a1365178e319" /> <img width="597" height="444" alt="image" src="https://github.com/user-attachments/assets/d0596c4d-94c1-4544-8b50-e7103ff207a6" /> <img width="597" height="444" alt="image" src="https://github.com/user-attachments/assets/be097921-011b-4dbe-b5f1-5d1306e25349" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2026-02-17 16:40:12 +05:30
parent 138840a23f
commit 229f56d6e3
31 changed files with 1209 additions and 1795 deletions
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -68,8 +68,7 @@ const hasActiveSegments = computed(
 );
 const activeSegmentName = computed(() => props.activeSegment?.name);

-const openCreateNewContactDialog = async () => {
-  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
+const openCreateNewContactDialog = () => {
  createNewContactDialogRef.value?.dialogRef.open();
 };
 const openContactImportDialog = () =>
--- a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
@@ -95,6 +95,7 @@ const inputClass = computed(() => {
          :show-dropdown="showCcEmailsDropdown"
          :is-loading="isLoading"
          type="email"
+          allow-create
          class="flex-1 min-h-7"
          @focus="emit('updateDropdown', 'cc', true)"
          @input="emit('searchCcEmails', $event)"
@@ -127,6 +128,7 @@ const inputClass = computed(() => {
        :show-dropdown="showBccEmailsDropdown"
        :is-loading="isLoading"
        type="email"
+        allow-create
        class="flex-1 min-h-7"
        focus-on-mount
        @focus="emit('updateDropdown', 'bcc', true)"
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -56,8 +56,13 @@ const selectedLabel = computed(() => {
 });

 const selectOption = option => {
-  selectedValue.value = option.value;
-  emit('update:modelValue', option.value);
+  if (selectedValue.value === option.value) {
+    selectedValue.value = '';
+    emit('update:modelValue', '');
+  } else {
+    selectedValue.value = option.value;
+    emit('update:modelValue', option.value);
+  }
  open.value = false;
  search.value = '';
 };
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -53,6 +53,11 @@ const props = defineProps({
    default: 'lg',
    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
  },
+  position: {
+    type: String,
+    default: 'center',
+    validator: value => ['center', 'top'].includes(value),
+  },
 });

 const emit = defineEmits(['confirm', 'close']);
@@ -61,6 +66,7 @@ const { t } = useI18n();

 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
+const isOpen = ref(false);

 const maxWidthClass = computed(() => {
  const classesMap = {
@@ -75,13 +81,19 @@ const maxWidthClass = computed(() => {
  return classesMap[props.width] ?? 'max-w-md';
 });

+const positionClass = computed(() =>
+  props.position === 'top' ? 'dialog-position-top' : ''
+);
+
 const open = () => {
+  isOpen.value = true;
  dialogRef.value?.showModal();
 };

 const close = () => {
  emit('close');
  dialogRef.value?.close();
+  isOpen.value = false;
 };

 const confirm = () => {
@@ -98,6 +110,7 @@ defineExpose({ open, close });
      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
      :class="[
        maxWidthClass,
+        positionClass,
        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
      ]"
      @close="close"
@@ -105,7 +118,7 @@ defineExpose({ open, close });
      <OnClickOutside @trigger="close">
        <form
          ref="dialogContentRef"
-          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
          @submit.prevent="confirm"
          @click.stop
        >
@@ -119,7 +132,7 @@ defineExpose({ open, close });
              </p>
            </slot>
          </div>
-          <slot />
+          <slot v-if="isOpen" />
          <!-- Dialog content will be injected here -->
          <slot name="footer">
            <div
@@ -156,4 +169,9 @@ defineExpose({ open, close });
 dialog::backdrop {
  @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
+
+.dialog-position-top {
+  margin-top: clamp(2rem, 5vh, 5rem);
+  margin-bottom: auto;
+}
 </style>
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
@@ -4,6 +4,10 @@ defineProps({
    type: String,
    default: '',
  },
+  height: {
+    type: String,
+    default: 'max-h-96',
+  },
 });
 </script>

@@ -15,7 +19,10 @@ defineProps({
    >
      {{ title }}
    </div>
-    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
+    <ul
+      class="gap-2 grid reset-base list-none px-2 overflow-y-auto"
+      :class="height"
+    >
      <slot />
    </ul>
  </div>
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -50,12 +50,12 @@ const currentFilter = computed(() =>
 );

 const getOperator = (filter, selectedOperator) => {
-  const operatorFromOptions = filter.filterOperators.find(
+  const operatorFromOptions = filter?.filterOperators?.find(
    operator => operator.value === selectedOperator
  );

  if (!operatorFromOptions) {
-    return filter.filterOperators[0];
+    return filter?.filterOperators?.[0];
  }

  return operatorFromOptions;
@@ -138,7 +138,11 @@ const validate = () => {
  return !validationError.value;
 };

-defineExpose({ validate });
+const resetValidation = () => {
+  showErrors.value = false;
+};
+
+defineExpose({ validate, resetValidation });
 </script>

 <template>
@@ -166,18 +170,20 @@ defineExpose({ validate });
      <FilterSelect
        v-model="filterOperator"
        variant="ghost"
-        :options="currentFilter.filterOperators"
+        :options="currentFilter?.filterOperators"
      />
-      <template v-if="currentOperator.hasInput">
+      <template v-if="currentOperator?.hasInput">
        <MultiSelect
          v-if="inputType === 'multiSelect'"
          v-model="values"
          :options="currentFilter.options"
+          dropdown-max-height="max-h-72"
        />
        <SingleSelect
          v-else-if="inputType === 'searchSelect'"
          v-model="values"
          :options="currentFilter.options"
+          dropdown-max-height="max-h-64"
        />
        <SingleSelect
          v-else-if="inputType === 'booleanSelect'"
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -45,7 +45,7 @@ const { height } = useWindowSize();
 const { height: dropdownHeight } = useElementBounding(dropdownRef);

 const selectedOption = computed(() => {
-  return props.options.find(o => o.value === selected.value) || {};
+  return props.options?.find(o => o.value === selected.value) || {};
 });

 const iconToRender = computed(() => {
@@ -87,18 +87,25 @@ const updateSelected = newValue => {
    </template>
    <DropdownBody
      ref="dropdownRef"
-      class="min-w-48 z-50"
+      class="min-w-56 z-50"
      :class="dropdownPosition"
      strong
    >
-      <DropdownSection class="[&>ul]:max-h-80">
-        <DropdownItem
-          v-for="option in options"
-          :key="option.value"
-          :label="option.label"
-          :icon="option.icon"
-          @click="updateSelected(option.value)"
-        />
+      <DropdownSection class="[&>ul]:max-h-72">
+        <template v-for="option in options" :key="option.value">
+          <li
+            v-if="option.disabled"
+            class="px-2 py-1.5 text-xs font-medium text-n-slate-10 select-none"
+          >
+            {{ option.label }}
+          </li>
+          <DropdownItem
+            v-else
+            :label="option.label"
+            :icon="option.icon"
+            @click="updateSelected(option.value)"
+          />
+        </template>
      </DropdownSection>
    </DropdownBody>
  </DropdownContainer>
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -8,7 +8,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';

-const { options, maxChips } = defineProps({
+const { options, maxChips, dropdownMaxHeight } = defineProps({
  options: {
    type: Array,
    required: true,
@@ -17,6 +17,10 @@ const { options, maxChips } = defineProps({
    type: Number,
    default: 3,
  },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
 });

 const { t } = useI18n();
@@ -123,7 +127,7 @@ const toggleOption = option => {
      </Button>
    </template>
    <DropdownBody class="top-0 min-w-48 z-50" strong>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
        <DropdownItem
          v-for="option in options"
          :key="option.id"
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -12,10 +12,12 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 const {
  options,
  disableSearch,
+  disableDeselect,
  placeholderIcon,
  placeholder,
  placeholderTrailingIcon,
  searchPlaceholder,
+  dropdownMaxHeight,
 } = defineProps({
  options: {
    type: Array,
@@ -41,6 +43,14 @@ const {
    type: String,
    default: '',
  },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
+  disableDeselect: {
+    type: Boolean,
+    default: false,
+  },
 });

 const { t } = useI18n();
@@ -63,6 +73,8 @@ const selectedItem = computed(() => {
  const optionToSearch = Array.isArray(selected.value)
    ? selected.value[0]
    : selected.value;
+
+  if (!optionToSearch) return null;
  // extract the selected item from the options array
  // this ensures that options like icon is also included
  return options.find(option => option.id === optionToSearch.id);
@@ -77,7 +89,7 @@ const toggleSelected = option => {
  };

  if (selected.value && selected.value.id === optionToToggle.id) {
-    selected.value = null;
+    if (!disableDeselect) selected.value = null;
  } else {
    selected.value = optionToToggle;
  }
@@ -124,7 +136,7 @@ const toggleSelected = option => {
          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
        />
      </div>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
        <template v-if="searchResults.length">
          <DropdownItem
            v-for="option in searchResults"
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -36,6 +36,11 @@ const props = defineProps({
  },
  focusOnMount: { type: Boolean, default: false },
  allowCreate: { type: Boolean, default: false },
+  // Skip label-based dedup when the consumer already filters menuItems by ID.
+  // Prevents removing all same-name items when one is selected (e.g. duplicate agent names).
+  skipLabelDedup: { type: Boolean, default: false },
+  // When false, the dropdown won't auto-open on mount; it opens only on click/focus.
+  autoOpenDropdown: { type: Boolean, default: true },
 });

 const emit = defineEmits([
@@ -56,7 +61,7 @@ const modelValue = defineModel({
 const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(true);
+const isFocused = ref(props.autoOpenDropdown);

 const rules = computed(() => getValidationRules(props.type));
 const v$ = useVuelidate(rules, { newTag });
@@ -74,11 +79,11 @@ const showInput = computed(() =>
 const showDropdownMenu = computed(() =>
  props.mode === MODE.SINGLE && tags.value.length >= 1
    ? false
-    : props.showDropdown
+    : props.showDropdown && isFocused.value
 );

-const filteredMenuItems = computed(() =>
-  buildTagMenuItems({
+const filteredMenuItems = computed(() => {
+  const items = buildTagMenuItems({
    mode: props.mode,
    tags: tags.value,
    menuItems: props.menuItems,
@@ -86,8 +91,14 @@ const filteredMenuItems = computed(() =>
    isLoading: props.isLoading,
    type: props.type,
    isNewTagInValidType: isNewTagInValidType.value,
-  })
-);
+    allowCreate: props.allowCreate,
+    skipLabelDedup: props.skipLabelDedup,
+  });
+  if (props.type !== INPUT_TYPES.TEXT) return items;
+  const query = newTag.value?.trim()?.toLowerCase();
+  if (!query) return items;
+  return items.filter(item => item.label?.toLowerCase().includes(query));
+});

 const emitDataOnAdd = value => {
  const matchingMenuItem = findMatchingMenuItem(props.menuItems, value);
@@ -112,10 +123,13 @@ const addTag = async () => {
    return;
  }

-  if (
-    [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(props.type) ||
-    props.allowCreate
-  ) {
+  const isValidatedType = [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(
+    props.type
+  );
+
+  if (!isValidatedType && !props.allowCreate && props.showDropdown) return;
+
+  if (isValidatedType || props.allowCreate) {
    if (!(await v$.value.$validate())) return;
    emitDataOnAdd(trimmedTag);
  }
@@ -125,28 +139,31 @@ const addTag = async () => {
 const removeTag = index => {
  tags.value.splice(index, 1);
  modelValue.value = tags.value;
-  emit('remove');
+  emit('remove', index);
 };

 const handleDropdownAction = async ({
  email: emailAddress,
  phoneNumber,
+  label,
  ...rest
 }) => {
  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
  if (!props.showDropdown) return;

-  const isEmail = props.type === 'email';
-  newTag.value = isEmail ? emailAddress : phoneNumber;
+  const isEmail = props.type === INPUT_TYPES.EMAIL;
+  const tagValue = isEmail ? emailAddress : phoneNumber || label;

-  if (!(await v$.value.$validate())) return;
+  if (isEmail || props.type === INPUT_TYPES.TEL) {
+    newTag.value = tagValue;
+    if (!(await v$.value.$validate())) return;
+  }

-  const payload = isEmail
-    ? { email: emailAddress, ...rest }
-    : { phoneNumber, ...rest };
-
-  emit('add', payload);
-  updateValueAndFocus(emailAddress);
+  emit(
+    'add',
+    isEmail ? { email: emailAddress, ...rest } : { phoneNumber, label, ...rest }
+  );
+  updateValueAndFocus(tagValue);
 };

 const handleFocus = () => {
@@ -163,7 +180,7 @@ const handleKeydown = event => {
 };

 const handleClickOutside = () => {
-  if (tags.value.length) isFocused.value = false;
+  isFocused.value = false;
  emit('onClickOutside');
 };

--- a/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
+++ b/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
@@ -261,6 +261,71 @@ describe('tagInputHelper', () => {
      });
      expect(result).toEqual(menuItems);
    });
+
+    it('does not create suggestion when allowCreate is false', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: false,
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('still returns available menu items when allowCreate is false', () => {
+      const menuItems = [
+        { label: 'Agent 1', value: '1' },
+        { label: 'Agent 2', value: '2' },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        menuItems,
+        newTag: 'Agent',
+        allowCreate: false,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('creates new item when allowCreate is true (default)', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: true,
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        label: 'test@example.com',
+        action: 'create',
+      });
+    });
+
+    it('skips label dedup when skipLabelDedup is true', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+        skipLabelDedup: true,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('filters by label when skipLabelDedup is false (default)', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+      });
+      expect(result).toEqual([]);
+    });
  });

  describe('canAddTag', () => {
--- a/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
+++ b/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
@@ -84,25 +84,29 @@ export const buildTagMenuItems = ({
  isLoading,
  type,
  isNewTagInValidType,
+  allowCreate = true,
+  skipLabelDedup = false,
 }) => {
  if (mode === MODE.SINGLE && tags.length >= 1) return [];

-  const availableMenuItems = menuItems.filter(
-    item => !tags.includes(item.label)
-  );
+  const availableMenuItems = skipLabelDedup
+    ? menuItems
+    : menuItems.filter(item => !tags.includes(item.label));

  // Show typed value as suggestion only if:
  // 1. There's a value being typed
  // 2. The value isn't already in the tags
  // 3. Validation passes (email/phone) and There are no menu items available
+  // 4. allowCreate is enabled
  const trimmedNewTag = newTag?.trim();
-  const shouldShowTypedValue =
+  const shouldShowCreateSuggestion =
+    allowCreate &&
    trimmedNewTag &&
    !tags.includes(trimmedNewTag) &&
    !isLoading &&
    !availableMenuItems.length;

-  if (shouldShowTypedValue) {
+  if (shouldShowCreateSuggestion) {
    const { isValid, formattedValue } = validateAndFormatNewTag(
      trimmedNewTag,
      type,