fix(combobox-multi-select): DP-180791 cursor position (#1141)

Author: ninarepetto

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.test.js

@@ -305,6 +305,38 @@ describe('DtComboboxMultiSelect Tests', () => {
     });
   });
 
+  describe('Duplicate Items Tests', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ selectedItems: ['item1', 'item1', 'item1'] });
+      await flushPromises();
+      _setChildWrappers();
+    });
+
+    it('should render a chip for each duplicate item', () => {
+      expect(chips.length).toBe(3);
+    });
+
+    it('should return distinct elements from getChips for duplicates', () => {
+      const chipElements = wrapper.vm.getChips();
+      const unique = new Set(chipElements);
+      expect(unique.size).toBe(3);
+    });
+  });
+
+  describe('Bulk Update Tests', () => {
+    it('should return chips in selectedItems order after bulk update', async () => {
+      await wrapper.setProps({ selectedItems: ['alpha', 'beta', 'gamma'] });
+      await flushPromises();
+      _setChildWrappers();
+
+      const chipElements = wrapper.vm.getChips();
+      const labels = chipElements.map(
+        el => el.querySelector('.d-chip__label')?.textContent?.trim(),
+      );
+      expect(labels).toEqual(['alpha', 'beta', 'gamma']);
+    });
+  });
+
   describe('Validation Tests', () => {
     beforeEach(async () => {
       await wrapper.setProps({

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue

@@ -27,9 +27,9 @@
           :class="['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]"
         >
           <dt-chip
-            v-for="item in selectedItems"
+            v-for="(item, index) in selectedItems"
             ref="chips"
-            :key="item"
+            :key="`${index}-${item}`"
             :label-class="['d-chip__label']"
             :class="[
               'd-recipe-combobox-multi-select__chip',
@@ -586,11 +586,18 @@ export default {
     getChips () {
       if (!this.selectedItems.length || !this.$refs.chips) return null;
 
-      // use the order from selectedItems to not rely on DOM order which may be stale
+      // Use the order from selectedItems to not rely on DOM order which may be stale.
+      // Track matched indices to handle duplicate item names correctly.
+      const matched = new Set();
       const chips = this.selectedItems.map(item => {
-        return this.$refs.chips.find(chip => {
+        return this.$refs.chips.find((chip, index) => {
+          if (matched.has(index)) return false;
           const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();
-          return chipLabel === item;
+          if (chipLabel === item) {
+            matched.add(index);
+            return true;
+          }
+          return false;
         });
       });
       return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));