fix: use object id in trackBy if key is object (#4545)

Author: m0ksem

packages/ui/src/components/va-select/VaSelect.stories.ts

@@ -372,3 +372,27 @@ export const OptionMultipleAutocompleteContentSlot: StoryFn = () => ({
     </template>
   </VaSelect>`,
 })
+
+export const EmptyTrackByLongList = defineStory({
+  story: () => ({
+    components: { VaSelect },
+
+    data () {
+      return {
+        value: '',
+        options: Array.from({ length: 100 }, (_, i) => ({ text: `Option ${i + 1}`, value: i + 1 })),
+      }
+    },
+
+    template: `
+      <VaSelect v-model="value" :options="options" placeholder="Select an option" />
+    `,
+  }),
+
+  async tests ({ canvasElement, step, expect }) {
+    step('Expect no error when mounted', () => {
+      const error = canvasElement.querySelector('.va-input-wrapper.va-input-wrapper--error') as HTMLElement
+      expect(error).toBeNull()
+    })
+  },
+})

packages/ui/src/composables/tests/useSelectableList.spec.ts

@@ -54,7 +54,7 @@ describe('useSelectableList', () => {
       {
         getGroupBy: undefined,
         getText: 'textValue',
-        getTrackBy: { text: 'textValue', disabled: false },
+        getTrackBy: 'va-obj-id-2',
         getValue: { text: 'textValue', disabled: false },
         getDisabled: false,
       },

packages/ui/src/composables/useSelectableList.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue'
 
 import { getValueByKey } from '../utils/value-by-key'
 import { isObject } from '../utils/is-object'
+import { getObjectId } from '../utils/get-object-uid'
 
 export type SelectableOption = string | number | boolean | Record<string, any> | null | undefined
 export type StringOrFunction = string | ((option: SelectableOption) => unknown)
@@ -35,7 +36,13 @@ export function useSelectableList (props: ExtractPropTypes<typeof useSelectableL
   }
 
   const getTrackBy = (option: SelectableOption): string | number => {
-    return props.trackBy ? getOptionProperty(option, props.trackBy) : getValue(option)
+    const key = props.trackBy ? getOptionProperty(option, props.trackBy) : getValue(option)
+
+    if (typeof key === 'object') {
+      return getObjectId(key)
+    }
+
+    return key
   }
 
   const getDisabled = (option: SelectableOption): boolean => {

packages/ui/src/utils/get-object-uid.ts

@@ -0,0 +1,17 @@
+let count: number = 1
+
+const idMap = new WeakMap<Record<string, unknown>, string>()
+
+export function getObjectId (object: Record<string, unknown>): string {
+  const objectId = idMap.get(object)
+
+  if (objectId === undefined) {
+    count += 1
+    const key = `va-obj-id-${count}`
+    idMap.set(object, key)
+
+    return key
+  }
+
+  return objectId
+}