fix(Modal): button side-effects when used within a button group

Author: romhml

src/runtime/components/Modal.vue

@@ -73,7 +73,7 @@ extendDevtoolsMeta({ example: 'ModalExample' })
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, toRef, provide } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -112,6 +112,9 @@ const ui = computed(() => modal({
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+// Blocks ButtonGroup injections to avoid side-effects if the modal is within a button group.
+provide(buttonGroupInjectionKey, undefined)
 </script>
 
 <template>

src/runtime/composables/useButtonGroup.ts

@@ -6,14 +6,15 @@ import type { GetObjectField } from '../types/utils'
 export const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
   size: ButtonGroupProps['size']
   orientation: ButtonGroupProps['orientation']
-}>> = Symbol('nuxt-ui.button-group')
+}> | undefined> = Symbol('nuxt-ui.button-group')
 
 type Props<T> = {
   size?: GetObjectField<T, 'size'>
 }
 
 export function useButtonGroup<T>(props: Props<T>) {
   const buttonGroup = inject(buttonGroupInjectionKey, undefined)
+
   return {
     orientation: computed(() => buttonGroup?.value.orientation),
     size: computed(() => props?.size ?? buttonGroup?.value.size)