fix(VOverlay): close on scrim click in Shadow DOM without activator

[cgodo]

Description

Overlay container created outside Shadow DOM

VOverlays inside Shadow DOM get the root node from activatorEl to add the overlay container. However, when there is no activator, like when using VDialogs with v-model, the root node can't be found and the .v-overlay-container is created outside
the Shadow DOM.

Fixed this by trying to get the root node from $el if it could not be found from activatorEl.

VDialog not closing on Scrim click

VOverlays inside Shadow DOM were not closing when clicking outside, in the scrim. The problem was in the click-outside directive, because the click event inside the Shadow DOM changes its target to the root once setTimeout triggers, and then the event is discarded because the target is no longer the Scrim.

Fixed this by retaining the original target of the event in a custom property in MouseEvent object, called shadowTarget, so VOverlay can use it after trying with the normal event target.

Markup:

In this playground there are different menus and modals, both in the shadow DOM and in the document:

<script setup>
  import { createApp, h, onMounted, ref } from 'vue'
  import vuetify from './vuetify'
  import { VBtn, VCard, VDialog, VList, VListItem, VMenu } from 'vuetify/src/components'

  const shadow = ref(null)
  const documentMenu = ref(false)
  const documentMenuBtn = ref(null)
  const documentDialog = ref(false)
  const documentDialog2 = ref(false)
  const shadowMenu = ref(false)
  const shadowDialog = ref(false)
  const shadowDialog2 = ref(false)

  onMounted(() => {
    const shadowRoot = shadow.value.attachShadow({ mode: 'open' })
    const shadowApp = document.createElement('div')
    shadowApp.id = 'shadow-app'
    shadowRoot.appendChild(shadowApp)
    document.querySelectorAll('style,link').forEach(styleElement => {
      shadowRoot.appendChild(styleElement.cloneNode(true))
    })

    createApp({
      render: () => h('div', { class: 'ma-5 d-flex align-center ga-5' }, [
        h('b', 'Shadow DOM'),
        // Menu with activator
        h(VMenu, {}, {
          activator: ({ props }) => h(VBtn, { ...props }, () => 'Activator Menu'),
          default: () => [
            h(VList, () => [
              h(VListItem, () => 'Item 1'),
              h(VListItem, () => 'Item 2'),
              h(VMenu, { location: 'right' }, {
                activator: ({ props }) => h(VListItem, { ...props, appendIcon: 'mdi-chevron-right' }, () => 'Submenu'),
                default: () => [
                  h(VList, () => [
                    h(VListItem, () => 'Item 1'),
                    h(VListItem, () => 'Item 2'),
                    h(VListItem, () => 'Item 3'),
                  ]),
                ],
              }),
            ]),
          ],
        }),

        // Menu with v-model
        h(VBtn, { onClick: () => shadowMenu.value = true }, () => [
          'Model Menu',
          h(VMenu,
            { modelValue: shadowMenu.value, 'onUpdate:modelValue': val => shadowMenu.value = val, target: 'parent' },
            () => h(VList, () => [
              h(VListItem, () => 'Item 1'),
              h(VListItem, () => 'Item 2'),
              h(VListItem, () => 'Item 3'),
            ]))]),

        // Dialog with activator
        h(VDialog, { width: 500 }, {
          activator: ({ props }) => h(VBtn, { ...props }, () => 'Activator Dialog'),
          default: ({ isActive }) => h(VCard, {
            title: 'Activator Dialog',
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.',
          }, {
            actions: () => [
              h(VDialog, { width: 300 }, {
                activator: ({ props }) => h(VBtn, { ...props }, () => 'Nested Dialog'),
                default: ({ isActive }) => h(VCard, {
                  title: 'Nested Activator Dialog',
                  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.',
                }, {
                  actions: () => h(VBtn, { onClick: () => isActive.value = false }, () => 'Close'),
                }),
              }),
              h(VBtn, { onClick: () => isActive.value = false }, () => 'Close'),
            ],
          }),
        }),

        // Dialog with v-model
        h(VBtn, { onClick: () => shadowDialog.value = true }, () => 'Model Dialog'),
        h(VDialog, { width: 500, modelValue: shadowDialog.value, 'onUpdate:modelValue': val => shadowDialog.value = val }, {
          default: () => h(VCard, {
            title: 'Model Dialog',
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.',
          }, {
            actions: () => [
              h(VBtn, { onClick: () => shadowDialog2.value = true }, () => 'Nested Dialog'),
              h(VBtn, { onClick: () => shadowDialog.value = false }, () => 'Close'),
            ],
          }),
        }),
        h(VDialog, { width: 300, modelValue: shadowDialog2.value, 'onUpdate:modelValue': val => shadowDialog2.value = val }, {
          default: () => h(VCard, {
            title: 'Nested Model Dialog',
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.',
          }, {
            actions: () => h(VBtn, { onClick: () => shadowDialog2.value = false }, () => 'Close'),
          }),
        }),
      ]),

    })
      .use(vuetify)
      .mount(shadowApp)
  })
</script>

<template>
  <div ref="shadow" />

  <div class="ma-5 d-flex align-center ga-5">
    <b>Document DOM</b>
    <!-- Menu with activator -->
    <v-menu>
      <template #activator="{ props }">
        <v-btn v-bind="props">Activator Menu</v-btn>
      </template>
      <v-list>
        <v-list-item>Item 1</v-list-item>
        <v-list-item>Item 2</v-list-item>
        <v-menu location="right">
          <template #activator="{ props }">
            <v-list-item v-bind="props" append-icon="mdi-chevron-right">Submenu</v-list-item>
          </template>
          <v-list>
            <v-list-item>Item 1</v-list-item>
            <v-list-item>Item 2</v-list-item>
            <v-list-item>Item 3</v-list-item>
          </v-list>
        </v-menu>
      </v-list>
    </v-menu>

    <!-- Menu with v-model -->
    <v-btn ref="documentMenuBtn" @click="documentMenu = !documentMenu">Model Menu</v-btn>
    <v-menu v-model="documentMenu" :target="documentMenuBtn">
      <v-list>
        <v-list-item>Item 1</v-list-item>
        <v-list-item>Item 2</v-list-item>
        <v-list-item>Item 3</v-list-item>
      </v-list>
    </v-menu>

    <!-- Dialog with activator -->
    <v-dialog width="500">
      <template #activator="{ props }">
        <v-btn v-bind="props">Activator Dialog</v-btn>
      </template>
      <template #default="{ isActive }">
        <v-card>
          <v-card-title>Activator Dialog</v-card-title>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.</v-card-text>
          <v-card-actions>
            <v-dialog width="300">
              <template #activator="{ props }">
                <v-btn v-bind="props">Nested Dialog</v-btn>
              </template>
              <template #default="{ isActive }">
                <v-card>
                  <v-card-title>Nested Activator Dialog</v-card-title>
                  <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.</v-card-text>
                  <v-card-actions>
                    <v-btn @click="isActive.value = false">Close</v-btn>
                  </v-card-actions>
                </v-card>
              </template>
            </v-dialog>
            <v-btn @click="isActive.value = false">Close</v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>

    <!-- Dialog with v-model -->
    <v-btn @click="documentDialog = true">Model Dialog</v-btn>
    <v-dialog v-model="documentDialog" width="500">
      <v-card>
        <v-card-title>Model Dialog</v-card-title>
        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.</v-card-text>
        <v-card-actions>
          <v-btn @click="documentDialog2 = true">Nested Dialog</v-btn>
          <v-btn @click="documentDialog = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="documentDialog2" width="300">
      <v-card>
        <v-card-title>Nested Model Dialog</v-card-title>
        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet egestas est. Mauris eu nisl quis turpis semper ullamcorper. Nulla facilisi.</v-card-text>
        <v-card-actions>
          <v-btn @click="documentDialog2 = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>