From cd9f97c4542aaeb2edb64b49df77bfc0c968e13f Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 18 Jan 2025 15:40:51 +0100
Subject: [PATCH] fix(Modal): button side-effects when used within a button
 group

---
 src/runtime/components/Modal.vue          | 5 ++++-
 src/runtime/composables/useButtonGroup.ts | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 2b274bab..2458d52e 100644
--- a/src/runtime/components/Modal.vue
+++ b/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>
diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
index 98475927..e844142b 100644
--- a/src/runtime/composables/useButtonGroup.ts
+++ b/src/runtime/composables/useButtonGroup.ts
@@ -6,7 +6,7 @@ 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'>
@@ -14,6 +14,7 @@ type Props<T> = {
 
 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)