fix menu / popover inside dialog

Author: aguingand

resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -9,6 +9,7 @@ import {
 } from 'reka-ui'
 import { cn } from '@/utils/cn'
 import { useMenuBoundaryElement } from "@/Layouts/Layout.vue";
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
@@ -27,10 +28,11 @@ const delegatedProps = computed(() => {
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const menuBoundary = useMenuBoundaryElement();
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <DropdownMenuPortal>
+  <DropdownMenuPortal :to="parentDialogElement ?? undefined">
     <DropdownMenuContent
       v-bind="forwarded"
       :collision-boundary="typeof props.collisionBoundary === 'undefined' ? menuBoundary : props.collisionBoundary"

resources/js/components/ui/popover/PopoverContent.vue

@@ -9,6 +9,7 @@ import {
     useForwardPropsEmits,
 } from 'reka-ui'
 import { cn } from '@/utils/cn'
+    import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
@@ -30,21 +31,12 @@ const delegatedProps = computed(() => {
   return delegated
 })
 
-const dialogContext = injectDialogRootContext(null);
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
-const parentDialogElement = ref<HTMLElement>();
-
-onMounted(() => {
-    if(dialogContext) {
-        nextTick(() => {
-            parentDialogElement.value = dialogContext.contentElement.value.parentElement;
-        });
-    }
-});
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <PopoverPortal :to="parentDialogElement">
+  <PopoverPortal :to="parentDialogElement ?? undefined">
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="

resources/js/components/ui/select/SelectContent.vue

@@ -10,13 +10,14 @@ import {
 } from 'reka-ui'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '@/utils/cn'
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'], teleportTo?: HTMLElement }>(),
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     position: 'popper',
   },
@@ -30,10 +31,12 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <SelectPortal :to="teleportTo">
+  <SelectPortal :to="parentDialogElement ?? undefined">
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
         'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

resources/js/components/ui/tooltip/TooltipContent.vue

@@ -2,6 +2,7 @@
 import { type HTMLAttributes, computed } from 'vue'
 import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/utils/cn'
+import { useParentDialogElement } from "@/composables/useParentDialogElement";
 
 defineOptions({
   inheritAttrs: false,
@@ -20,10 +21,11 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const parentDialogElement = useParentDialogElement();
 </script>
 
 <template>
-  <TooltipPortal>
+  <TooltipPortal :to="parentDialogElement ?? undefined">
     <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden max-w-sm rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
       <slot />
     </TooltipContent>

resources/js/composables/useParentDialogElement.ts

@@ -0,0 +1,31 @@
+import { computed, ComputedRef, inject, nextTick, onMounted, provide, ref, Ref } from "vue";
+import { injectDialogRootContext } from "reka-ui";
+
+export function provideParentDialogElement(dialog: Ref<HTMLElement>) {
+    provide<ComputedRef<HTMLDialogElement | undefined>>(
+        'parentDialog',
+        computed(() =>
+            dialog.value instanceof HTMLDialogElement
+                ? dialog.value
+                : undefined
+        )
+    );
+}
+
+export function useParentDialogElement() {
+    const parentDialogElement = inject<ComputedRef<HTMLDialogElement | undefined>>('parentDialog', undefined);
+    const rekaDialogContext = injectDialogRootContext(null);
+
+    if(rekaDialogContext) {
+        const rekaDialogElement = ref<HTMLElement | undefined>();
+
+        onMounted(async () => {
+            await nextTick();
+            rekaDialogElement.value = rekaDialogContext?.contentElement.value?.parentElement;
+        });
+
+        return computed(() => parentDialogElement.value ?? rekaDialogElement.value);
+    }
+
+    return parentDialogElement;
+}

resources/js/form/components/FormFieldLocaleSelect.vue

@@ -7,7 +7,7 @@ import { FormFieldEmits, FormFieldProps } from "@/form/types";
 import { FormFieldData } from "@/types";
 import { useParentForm } from "@/form/useParentForm";
 
-const props = defineProps<FormFieldProps<FormFieldData, any> & { teleportTo?: HTMLElement, isFieldLayout?: boolean }>();
+const props = defineProps<FormFieldProps<FormFieldData, any> & { isFieldLayout?: boolean }>();
 const emit = defineEmits<FormFieldEmits>();
 const form = useParentForm();
 </script>
@@ -19,7 +19,7 @@ const form = useParentForm();
             :class="{ '-my-2': isFieldLayout }"
             :aria-label="__('sharp::form.field_locale_selector.aria_label', { field_label:field.label })"
         />
-        <SelectContent :teleport-to="teleportTo">
+        <SelectContent>
             <template v-for="itemLocale in form.locales" :key="itemLocale">
                 <SelectItem :value="itemLocale">
                     <div class="flex items-center">

resources/js/form/components/fields/editor/Editor.vue

@@ -54,6 +54,7 @@
     import FormFieldLocaleSelect from "@/form/components/FormFieldLocaleSelect.vue";
     import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
     import { vScrollIntoView } from "@/directives/scroll-into-view";
+    import { provideParentDialogElement } from "@/composables/useParentDialogElement";
 
     const emit = defineEmits<FormFieldEmits<FormEditorFieldData>>();
     const props = defineProps<FormFieldProps<FormEditorFieldData>>();
@@ -67,13 +68,15 @@
     const uploadModal = ref<InstanceType<typeof EditorUploadModal>>();
 
     const embedManager = new ContentEmbedManager(form, props.field.embeds, props.value?.embeds);
-    const el = useTemplateRef<HTMLDialogElement>('el');
+    const el = useTemplateRef<HTMLDialogElement | HTMLDivElement>('el');
     const embedModal = ref<InstanceType<typeof EditorEmbedModal>>();
     const linkDropdown = ref<InstanceType<typeof LinkDropdown>>();
     const isMounted = ref(false);
     const isUnmounting = ref(false);
     const isFullscreen = ref(false);
 
+    provideParentDialogElement(el);
+
     provide<ParentEditor>('editor', {
         props,
         uploadManager,