nuxt / nuxt/ui

`USelect`'s border radius as the last item of `UFieldGroup` breaks when inside `UForm`

Open
#5,110 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted upstream/reka-ui
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment
  • Operating System: Linux
  • Node Version: v20.19.1
  • Nuxt Version: -
  • CLI Version: 3.28.0
  • Nitro Version: -
  • Package Manager: pnpm@8.15.6
  • Builder: -
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -
Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.0.0

Reproduction

https://stackblitz.com/edit/vitejs-vite-refidcgr?file=src%2FApp.vue
Open in blink-based browsers, something in the reproduction seems to just not work in webcontainers on Firefox.

For history:

<template>
  <UApp>
    <UForm class="p-12">
      <UFieldGroup>
        <UButton label="button" />
        <USelect placeholder="select" />
      </UFieldGroup>
    </UForm>
  </UApp>
</template>
Description

Adding USelect into UFieldGroup generally works, all corners are being rounded.

Placing the resulting UFieldGroup inside a UForm results in the right corners of the UFieldGroup not being rounded at all.

Additional context
Image
Logs

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproduction in src/App.vue and reproduce the USelect inside UFieldGroup and UForm in a Chromium-based browser. Trace the styling for these components and confirm the fix by checking that the group's right corners remain rounded inside UForm.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.