fix(AutoComplete): error getText & getIdentifier used before initialized

src/components/forms/auto-complete/RuiAutoComplete.vue

@@ -95,6 +95,16 @@ const slots = useSlots();
 
 const { dense, variant, disabled, options } = toRefs(props);
 
+const {
+  getText,
+  getIdentifier,
+} = useDropdownOptionProperty<T, K>(
+  {
+    keyAttr: props.keyAttr,
+    textAttr: props.textAttr,
+  },
+);
+
 const textInput = ref();
 const activator = ref();
 const noDataContainer = ref();
@@ -237,8 +247,6 @@ const {
   renderedData,
   isOpen,
   menuWidth,
-  getText,
-  getIdentifier,
   isActiveItem,
   itemIndexInValue,
   highlightedIndex,

src/composables/dropdown-menu.ts

@@ -1,12 +1,15 @@
 import type { Ref } from 'vue';
 
-export interface DropdownOptions<T, K> {
+export interface DropdownItemAttr<T, K> {
+  keyAttr?: K;
+  textAttr?: K | ((item: T) => string);
+}
+
+export interface DropdownOptions<T, K> extends DropdownItemAttr<T, K> {
   options: Ref<T[]>;
   dense?: Ref<boolean>;
   value: Ref<T | T[] | undefined>;
   menuRef: Ref<HTMLElement>;
-  keyAttr?: K;
-  textAttr?: K | ((item: T) => string);
   appendWidth?: number;
   prependWidth?: number;
   itemHeight?: number;
@@ -17,6 +20,35 @@ export interface DropdownOptions<T, K> {
   hideSelected?: boolean;
 }
 
+export function useDropdownOptionProperty<T, K extends keyof T>({
+  keyAttr,
+  textAttr,
+}: DropdownItemAttr<T, K>) {
+  function getText(item: T): T[K] | T | string {
+    if (textAttr) {
+      if (typeof textAttr === 'function')
+        return textAttr(item);
+
+      else
+        return item[textAttr];
+    }
+
+    return item;
+  }
+
+  function getIdentifier(item: T): T[K] | T {
+    if (keyAttr)
+      return item[keyAttr];
+
+    return item;
+  }
+
+  return {
+    getIdentifier,
+    getText,
+  };
+};
+
 export function useDropdownMenu<T, K extends keyof T>({
   appendWidth,
   autoFocus,
@@ -41,6 +73,11 @@ export function useDropdownMenu<T, K extends keyof T>({
     return options.filter(item => !isActiveItem(item));
   });
 
+  const { getIdentifier, getText } = useDropdownOptionProperty({
+    keyAttr,
+    textAttr,
+  });
+
   const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<T>(
     options,
     {
@@ -99,25 +136,6 @@ export function useDropdownMenu<T, K extends keyof T>({
     set(isOpen, state);
   }
 
-  function getText(item: T): T[K] | T | string {
-    if (textAttr) {
-      if (typeof textAttr === 'function')
-        return textAttr(item);
-
-      else
-        return item[textAttr];
-    }
-
-    return item;
-  }
-
-  function getIdentifier(item: T): T[K] | T {
-    if (keyAttr)
-      return item[keyAttr];
-
-    return item;
-  }
-
   function itemIndexInValue(item: T): number {
     const val = get(value);
     const selected: T[] = Array.isArray(val) ? val : (val ? [val] : []);