[Bug]: Select's keyboard navigation doesn't work in some cases with v-bind="$attrs"

[zumm]

Environment

See in reproduction.

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-rsznxfyd?file=src%2FApp.vue

Steps to reproduce

Try to use keyboard navigation in reproduction.

Describe the bug

Lets say we have XSelectItem component like that:

<template>
  <SelectItem as-child>
    <SelectItemText as-child>
      <slot />
    </SelectItemText>
  </SelectItem>
</template>

And XListItem like that:

<script setup lang="ts">
defineOptions({ inheritAttrs: false });
</script>

<template>
  <li>
    <div v-bind="$attrs">
      <slot />
    </div>
  </li>
</template>

If we combine them together:

<template>
  <XSelect>
    <XSelectItem value="1">
      <XListItem>One</XListItem>
    </XSelectItem>

    <XSelectItem value="2">
      <XListItem>Two</XListItem>
    </XSelectItem>
  </XSelect>
</template>

Keyboard navigation will not work. But if we move v-bind="$attrs" from div to li in XListItem navigation will work.

Expected behavior

Keyboard navigation should work regardless of v-bind="$attrs" target, no?

Context & Screenshots (if applicable)

No response

[zernonia]

Hi @zumm , thanks for reporting the bug. The reason it's "broken" because we leverage ref to handle certain part of the logic. When you bind attrs to another child (as ref is not being pass onto this child), this breaks the reference element and thus it's not working.

This will not be fixed as it is Vue's current limitation vuejs/rfcs#258

As a simple solution, I would suggest to make following changes:

<template>
  <!-- Render as li element -->
  <SelectItem as="li">
    <SelectItemText as-child>
      <slot />
    </SelectItemText>
  </SelectItem>
</template>

<template> 
  <!-- Need not to bind it manually -->
  <div>
    <slot />
  </div> 
</template>