[ButtonGroup] Nested buttons are also styled as if they were directly placed

[mateusznarowski]

Environment

• Operating System: Darwin
• Node Version: v23.11.0
• Nuxt Version: 3.17.4
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: pnpm@10.11.0
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.3

Reproduction

https://codesandbox.io/p/devbox/condescending-euclid-k9r7nc

Description

When a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup

<template>
  <UButtonGroup>
    <UInput placeholder="Search..." />
    <UModal>
      <UButton color="neutral" variant="outline">
        Open modal
      </UButton>

      <template #body>
        <UButton label="button1" />
        <UButton label="button2" />
        <UButton label="button3" />
      </template>
    </UModal>
  </UButtonGroup>
</template>

Also, size and orientation affect the buttons inside the modal

<template>
  <UButtonGroup orientation="vertical" size="lg">
    ...
  </UButtonGroup>
</template>

Additional context

No response

Logs

[benjamincanac]

@romhml Didn't we fix this already? 🤔

[mateusznarowski]

The same applies to the other components that have useButtonGroup used inside them.

[mateusznarowski]

I came up with an idea maybe it would be a good idea to wrap the <DialogPortal /> element with a component that would set provide(buttonGroupInjectionKey, undefined)?

<template>
  <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
      <slot :open="open" />
    </DialogTrigger>

    <ModalProvideReset>
      <DialogPortal v-bind="portalProps">
        ...
      </DialogPortal>
    </ModalProvideReset>
  </DialogRoot>
</template>

<script setup lang="ts">
import { provide } from 'vue'
import { buttonGroupInjectionKey } from '../composables/useButtonGroup'

provide(buttonGroupInjectionKey, undefined)
</script>

<template>
  <slot />
</template>

I remember that earlier there was a similar problem with UForm, where it rendered a div instead of a form if there was this UModal in the UForm with attach prop.

[romhml]

@benjamincanac we already had a discussion around this but couldn't agree on a solution. I think we still have the same two options, either block the injection for the button group in overlay components (modale, slideovers...) or rework the button group component to work without one.

[github-actions]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team

[KazimirPodolski]

It hurts some valid UI cases, for example groups of filters by "tags" or somethig: https://codesandbox.io/p/devbox/gracious-tu-r4phv7.

[KazimirPodolski]

Can it be reopened? It's not fixed and reproduces in many cases.

[benjamincanac]

@KazimirPodolski Let's track in #5045.