Environment
- Operating System: Linux
- Node Version: v20.12.0
- Nuxt Version: 4.2.1
- CLI Version: 3.30.0
- Nitro Version: 2.12.9
- Package Manager: pnpm@8.15.6
- Builder: -
- User Config: modules, devtools, compatibilityDate, future, css
- Runtime Modules: @nuxt/ui@4.2.1
- Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.2.1
Reproduction
https://codesandbox.io/p/devbox/confident-pare-4mr34v?workspaceId=ws_AnNt2dH7LHESVuYmaRPJ6a
Description
If you use a USelectMenu inside a UFieldGroup that's wrapped in a UFormField, the border-radius on the last element breaks.
The issue is that Reka UI renders a hidden <input> (for native form submission) as a direct child of the UFieldGroup. This hidden input ends up being the actual :last-child instead of the SelectMenu trigger, so the rounded corners CSS doesn't apply where it should.
The DOM looks like this:
<div data-orientation="horizontal" class="... -space-x-px">
<div data-slot="root">...</div> <!-- InputNumber -->
<button data-slot="base">...</button> <!-- SelectMenu trigger -->
<input data-hidden="" name="myfield" /> <!-- ← this breaks :last-child -->
</div>
Works fine without the UFormField wrapper, or with name="" on the SelectMenu as a workaround.
Additional context
No response
Logs
Environment
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.2.1
Reproduction
https://codesandbox.io/p/devbox/confident-pare-4mr34v?workspaceId=ws_AnNt2dH7LHESVuYmaRPJ6a
Description
If you use a
USelectMenuinside aUFieldGroupthat's wrapped in aUFormField, the border-radius on the last element breaks.The issue is that Reka UI renders a hidden
<input>(for native form submission) as a direct child of theUFieldGroup. This hidden input ends up being the actual:last-childinstead of theSelectMenutrigger, so the rounded corners CSS doesn't apply where it should.The DOM looks like this:
Works fine without the
UFormFieldwrapper, or withname=""on theSelectMenuas a workaround.Additional context
No response
Logs