Skip to content

[UFieldGroup] Broken border-radius with SelectMenu inside FormField #6160

@Flamystal

Description

@Flamystal

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriageAwaiting initial review and prioritizationv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions