diff --git a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
index d242f81..f818871 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
+++ b/src/components/forms/auto-complete/RuiAutoComplete.spec.ts
@@ -62,9 +62,7 @@ describe('autocomplete', () => {
   it('works with primitive options', () => {
     const wrapper = createWrapper({
       propsData: {
-        keyAttr: 'id',
         options: options.map(item => item.label),
-        textAttr: 'label',
         value: options[4].label,
       },
     });
diff --git a/src/components/forms/auto-complete/RuiAutoComplete.vue b/src/components/forms/auto-complete/RuiAutoComplete.vue
index 550bac3..019864a 100644
--- a/src/components/forms/auto-complete/RuiAutoComplete.vue
+++ b/src/components/forms/auto-complete/RuiAutoComplete.vue
@@ -8,7 +8,7 @@ import type { Ref } from 'vue';
 
 export type T = any;
 
-export type K = Extract<keyof T, string>;
+export type K = string;
 
 export type ModelValue<MV> = MV | MV[] | null;
 
@@ -73,17 +73,15 @@ const emit = defineEmits<{
 const css = useCssModule();
 const attrs = useAttrs();
 
-const { dense, variant, disabled } = toRefs(props);
-
-const multiple = computed(() => Array.isArray(props.value));
+const { dense, variant, disabled, options } = toRefs(props);
 
 const textInput = ref();
-const { focused: searchInputFocused } = useFocus(textInput);
+const activator = ref();
+const menuRef = ref();
 
-const isPrimitiveOptions = computed(() => !(props.options[0] instanceof Object));
+const multiple = computed(() => Array.isArray(props.value));
 
-const keyProp = computed<K>(() => props.keyAttr ?? 'key' as K);
-const textProp = computed<K>(() => props.textAttr ?? 'label' as K);
+const { focused: searchInputFocused } = useFocus(textInput);
 
 const internalSearch: Ref<string> = ref('');
 const debouncedInternalSearch = refDebounced(internalSearch, 200);
@@ -96,28 +94,20 @@ watchImmediate(searchInputModel, (search) => {
   set(internalSearch, search);
 });
 
-const mappedOptions = computed<(T extends string ? T : Record<K, T>)[]>(() => {
-  const filtered = props.options;
-  if (!get(isPrimitiveOptions))
-    return filtered;
-
-  return filtered.map(item => ({
-    [get(keyProp)]: item,
-    [get(textProp)]: item,
-  }));
-});
-
 const filteredOptions = computed(() => {
   const search = get(debouncedInternalSearch);
-  const optionsVal = get(mappedOptions);
+  const optionsVal = get(options);
   if (props.noFilter || !search)
     return optionsVal;
 
+  const keyAttr = props.keyAttr;
+  const textAttr = props.textAttr;
+
   const usedFilter = props.filter || ((item, search) => {
-    const keywords = [item[get(keyProp)]];
+    const keywords = [keyAttr ? item[keyAttr] : item.toString()];
 
-    if (!get(isPrimitiveOptions))
-      keywords.push(item[get(textProp)]);
+    if (textAttr && typeof item === 'object')
+      keywords.push(item[textAttr]);
 
     return keywords.some(keyword => getTextToken(keyword).includes(getTextToken(search)));
   });
@@ -132,15 +122,17 @@ function input(value: ModelValue<T>) {
 const value = computed<(T extends string ? T : Record<K, T>)[]>({
   get: () => {
     const value = props.value;
+    const keyAttr = props.keyAttr;
     const valueToArray = value ? (Array.isArray(value) ? value : [value]) : [];
 
-    if (props.keyAttr || get(isPrimitiveOptions))
-      return get(mappedOptions).filter(item => valueToArray.includes(item[get(keyProp)]));
+    if (keyAttr)
+      return get(options).filter(item => valueToArray.includes(item[keyAttr]));
 
     return valueToArray;
   },
   set: (selected: T[]) => {
-    const selection = props.keyAttr || get(isPrimitiveOptions) ? selected.map(item => item[get(keyProp)]) : selected;
+    const keyAttr = props.keyAttr;
+    const selection = keyAttr ? selected.map(item => item[keyAttr]) : selected;
 
     if (get(multiple))
       return input(selection);
@@ -171,17 +163,17 @@ const {
   getIdentifier,
   isActiveItem,
   itemIndexInValue,
-  menuRef,
   highlightedIndex,
   moveHighlight,
   applyHighlighted,
 } = useDropdownMenu<T, K>({
   itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),
-  keyAttr: get(keyProp),
-  textAttr: get(textProp),
+  keyAttr: props.keyAttr,
+  textAttr: props.textAttr,
   options: filteredOptions,
   dense,
   value,
+  menuRef,
   setValue,
   autoSelectFirst: props.autoSelectFirst,
 });
@@ -260,7 +252,9 @@ watch(focusedValueIndex, (index) => {
     return;
 
   nextTick(() => {
-    const data = get(value)[index][get(keyProp)];
+    const keyAttr = props.keyAttr;
+    const entry = get(value)[index];
+    const data = keyAttr ? entry[keyAttr] : entry;
     const activeChip = get(activator).querySelector(`[data-value="${data}"]`);
     activeChip?.focus();
   });
@@ -291,7 +285,6 @@ function moveSelectedValueHighlight(next: boolean) {
   }
 }
 
-const activator = ref();
 const { focused: activatorFocusedWithin } = useFocusWithin(activator);
 const { focused: menuFocusedWithin } = useFocusWithin(containerProps.ref);
 const anyFocused = logicOr(activatorFocusedWithin, menuFocusedWithin);
@@ -310,7 +303,7 @@ function onInputFocused() {
 }
 
 function clear() {
-  emit('input', null);
+  emit('input', Array.isArray(props.value) ? [] : null);
 }
 
 function onInputDeletePressed() {
@@ -399,10 +392,10 @@ function onInputDeletePressed() {
             <template v-for="(item, i) in value">
               <RuiChip
                 v-if="multiple"
-                :key="item[keyProp]"
+                :key="getIdentifier(item)"
                 tabindex="-1"
                 :size="dense ? 'sm' : 'md'"
-                :data-value="item[keyProp]"
+                :data-value="getIdentifier(item)"
                 closeable
                 clickable
                 @keydown.delete="setValue(item)"
@@ -429,7 +422,7 @@ function onInputDeletePressed() {
               </RuiChip>
               <div
                 v-else
-                :key="item[keyProp]"
+                :key="getIdentifier(item)"
                 class="flex"
               >
                 <slot
@@ -502,19 +495,19 @@ function onInputDeletePressed() {
           ref="menuRef"
         >
           <RuiButton
-            v-for="(item) in renderedData"
-            :key="item.index"
+            v-for="({ item, index }) in renderedData"
+            :key="index"
             :active="isActiveItem(item)"
             :size="dense ? 'sm' : undefined"
             :value="getIdentifier(item)"
             variant="list"
             :class="{
-              highlighted: highlightedIndex === item.index,
-              [css.highlighted]: highlightedIndex === item.index,
+              highlighted: highlightedIndex === index,
+              [css.highlighted]: highlightedIndex === index,
               [css.active]: isActiveItem(item),
             }"
-            @input="setValue(item, item.index)"
-            @mousedown="highlightedIndex = item.index"
+            @input="setValue(item, index)"
+            @mousedown="highlightedIndex = index"
           >
             <template #prepend>
               <slot
diff --git a/src/components/forms/select/RuiMenuSelect.spec.ts b/src/components/forms/select/RuiMenuSelect.spec.ts
index 8196549..45009e4 100644
--- a/src/components/forms/select/RuiMenuSelect.spec.ts
+++ b/src/components/forms/select/RuiMenuSelect.spec.ts
@@ -62,9 +62,7 @@ describe('menu select', () => {
   it('works with primitive options', () => {
     const wrapper = createWrapper({
       propsData: {
-        keyAttr: 'id',
         options: options.map(item => item.label),
-        textAttr: 'label',
         value: options[4].label,
       },
     });
diff --git a/src/components/forms/select/RuiMenuSelect.vue b/src/components/forms/select/RuiMenuSelect.vue
index 03fab0a..3ce203f 100644
--- a/src/components/forms/select/RuiMenuSelect.vue
+++ b/src/components/forms/select/RuiMenuSelect.vue
@@ -5,7 +5,7 @@ import RuiMenu, { type MenuProps } from '@/components/overlays/menu/Menu.vue';
 
 export type T = any;
 
-export type K = Extract<keyof T, string>;
+export type K = string;
 
 export interface Props<T> {
   options: T[];
@@ -63,34 +63,22 @@ const emit = defineEmits<{
 const css = useCssModule();
 const attrs = useAttrs();
 
-const { dense, variant } = toRefs(props);
+const { dense, variant, options } = toRefs(props);
 
+const menuRef = ref();
 const activator = ref();
 const { focused } = useFocus(activator);
 
-const isPrimitiveOptions = computed(() => !(props.options[0] instanceof Object));
-
-const keyProp = computed<K>(() => props.keyAttr ?? 'key' as K);
-const textProp = computed<K>(() => props.textAttr ?? 'label' as K);
-
-const mappedOptions = computed<(T extends string ? T : Record<K, T>)[]>(() => {
-  if (!get(isPrimitiveOptions))
-    return props.options;
-
-  return props.options.map(option => ({
-    [get(keyProp)]: option,
-    [get(textProp)]: option,
-  }));
-});
-
-const value = computed<(T extends string ? T : Record<K, T>) | undefined>({
+const value = computed<T | undefined>({
   get: () => {
-    if (props.keyAttr || get(isPrimitiveOptions))
-      return get(mappedOptions).find(option => option[get(keyProp)] === props.value);
-    return props.value;
+    const keyAttr = props.keyAttr;
+    if (keyAttr)
+      return props.options.find(option => option[keyAttr] === props.value);
+    return props.value as T;
   },
   set: (selected?: T) => {
-    const selection = (props.keyAttr || get(isPrimitiveOptions)) && selected ? selected[get(keyProp)] : selected;
+    const keyAttr = props.keyAttr;
+    const selection = keyAttr && selected ? selected[keyAttr] : selected;
     return emit('input', selection);
   },
 });
@@ -111,17 +99,18 @@ const {
   getText,
   getIdentifier,
   isActiveItem,
-  menuRef,
   highlightedIndex,
   moveHighlight,
+  valueKey,
 } = useDropdownMenu<T, K>({
   itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),
-  keyAttr: get(keyProp),
-  textAttr: get(textProp),
-  options: mappedOptions,
+  keyAttr: props.keyAttr,
+  textAttr: props.textAttr,
+  options,
   autoFocus: true,
   dense,
   value,
+  menuRef,
   autoSelectFirst: props.autoSelectFirst,
 });
 
@@ -256,7 +245,7 @@ function setValue(val: T, index?: number) {
         </fieldset>
       </slot>
       <input
-        :value="value ? value[keyProp] : ''"
+        :value="valueKey"
         class="hidden"
         type="hidden"
       />
@@ -275,18 +264,18 @@ function setValue(val: T, index?: number) {
           ref="menuRef"
         >
           <RuiButton
-            v-for="(item) in renderedData"
-            :key="item.index"
+            v-for="({ item, index }) in renderedData"
+            :key="index"
             :active="isActiveItem(item)"
             :size="dense ? 'sm' : undefined"
             :value="getIdentifier(item)"
             variant="list"
             :class="{
-              highlighted: highlightedIndex === item.index,
-              [css.highlighted]: !isActiveItem(item) && highlightedIndex === item.index,
+              highlighted: highlightedIndex === index,
+              [css.highlighted]: !isActiveItem(item) && highlightedIndex === index,
             }"
-            @input="setValue(item, item.index)"
-            @mousedown="highlightedIndex = item.index"
+            @input="setValue(item, index)"
+            @mousedown="highlightedIndex = index"
           >
             <template #prepend>
               <slot
diff --git a/src/composables/dropdown-menu.ts b/src/composables/dropdown-menu.ts
index 70d6f1d..ce5b5c9 100644
--- a/src/composables/dropdown-menu.ts
+++ b/src/composables/dropdown-menu.ts
@@ -4,8 +4,9 @@ export interface DropdownOptions<T, K> {
   options: Ref<T[]>;
   dense?: Ref<boolean>;
   value: Ref<T | T[] | undefined>;
-  keyAttr: K;
-  textAttr: K;
+  menuRef: Ref<HTMLElement>;
+  keyAttr?: K;
+  textAttr?: K;
   appendWidth?: number;
   prependWidth?: number;
   itemHeight?: number;
@@ -22,6 +23,7 @@ export function useDropdownMenu<T, K extends keyof T>({
   dense,
   itemHeight = 48,
   keyAttr,
+  menuRef,
   options,
   overscan = 5,
   prependWidth,
@@ -37,13 +39,18 @@ export function useDropdownMenu<T, K extends keyof T>({
     },
   );
 
-  const renderedData: ComputedRef<(T & { index: number })[]> = useArrayMap(list, ({ data, index }) => ({ ...data, index }));
+  const renderedData = useArrayMap(list, ({ data, index }) => ({ index, item: data }));
 
   const isOpen: Ref<boolean> = ref(false);
 
-  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);
+  const valueKey = computed(() => {
+    const selected = get(value);
+    if (!keyAttr || !selected)
+      return selected;
+    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];
+  });
 
-  const menuRef = ref();
+  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);
 
   const menuWidth = computed(() => {
     const widths = { max: 0, min: 0 };
@@ -82,12 +89,18 @@ export function useDropdownMenu<T, K extends keyof T>({
     set(isOpen, state);
   }
 
-  function getText(item: T): T[K] {
-    return item[textAttr];
+  function getText(item: T): T[K] | T {
+    if (textAttr)
+      return item[textAttr];
+
+    return item;
   }
 
-  function getIdentifier(item: T): T[K] {
-    return item[keyAttr];
+  function getIdentifier(item: T): T[K] | T {
+    if (keyAttr)
+      return item[keyAttr];
+
+    return item;
   }
 
   function itemIndexInValue(item: T): number {
@@ -97,7 +110,11 @@ export function useDropdownMenu<T, K extends keyof T>({
     if (selected.length === 0)
       return -1;
 
-    return selected.findIndex(selectedItem => selectedItem[keyAttr] === item[keyAttr]);
+    return selected.findIndex((selectedItem) => {
+      if (keyAttr)
+        return selectedItem[keyAttr] === item[keyAttr];
+      return selectedItem === item;
+    });
   }
 
   function isActiveItem(item: T): boolean {
@@ -109,19 +126,19 @@ export function useDropdownMenu<T, K extends keyof T>({
     nextTick(() => {
       const container = get(menuRef)?.parentElement;
       if (container && index > -1) {
-        const highlightedElem = get(menuRef)
-          .getElementsByClassName('highlighted')[0];
+        const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];
 
         if (highlightedElem) {
           highlightedElem.scrollIntoView?.({ block: 'nearest' });
-          if (get(autoFocus))
-            highlightedElem.focus();
+          if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')
+            highlightedElem?.focus();
         }
         else {
           container.scrollTop = index * itemHeight;
           if (get(autoFocus)) {
-            get(menuRef)
-              .getElementsByClassName('highlighted')[0]?.focus();
+            const elem = get(menuRef).getElementsByClassName('highlighted')[0];
+            if ('focus' in elem && typeof elem.focus === 'function')
+              elem.focus();
           }
         }
       }
@@ -197,9 +214,9 @@ export function useDropdownMenu<T, K extends keyof T>({
     if (highlightedIndexVal === -1)
       return;
 
-    const data = get(renderedData).find(({ index }) => highlightedIndexVal === index);
-    if (data)
-      setValue(data);
+    const entry = get(options).find((_data, index) => highlightedIndexVal === index);
+    if (entry)
+      setValue(entry);
   };
 
   return {
@@ -211,11 +228,11 @@ export function useDropdownMenu<T, K extends keyof T>({
     isActiveItem,
     isOpen,
     itemIndexInValue,
-    menuRef,
     menuWidth,
     moveHighlight,
     renderedData,
     toggle,
+    valueKey,
     wrapperProps,
   };
 }