[USelectMenu] Hydration mismatch on root id

[FranciscoKloganB]

Environment

• Node Version - v20.10.0
• Package Manager - npm@10.2.3
• Nuxt Version - 3.10.3

Version

v2.13.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-1cbn2x?file=app.vue,components%2Fcustom-select.vue

Description

According to the documentation of the <SelectMenu /> component defined here, it should be possible to set an ID property on on <SelectMenu />.

However, that documentation is not respected. Meaning that invoking the component as outlined below is equivalent.

  <!-- adds a custom identifier for trigger container, e.g.: 'foo-bar' -->
  <USelectMenu :id="id" v-model="current" :options="locales" by="code">
    <UButton>Foo Bar</UButton>
  </USelectMenu>

 <!-- does not define an identifier for trigger container -->
 <USelectMenu v-model="current" :options="locales" by="code">
   <UButton>Foo Bar</UButton>
 </USelectMenu>

As seen in the component implementation here it appears that id prop is not used on the root element. Which would explain a custom ID set externally by the consumer not showing up on the DOM.

Furthermore, not only are we not allowed to define an ID, this is causing hydration mismatches between client and server as outlined on the screenshots below.

Additional context

Logs

No response

[redcodemohammed]

I think I have the same issue here but with a different component, in my case, it's the Accordion,

I found out that the server doesn't reset it's counter when giving an id for elements when you refresh the page, so the client side always gives the element ids starting with 1, but on the server side, it increases with every refresh.

[benjamincanac]

Duplicate #1171.