Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Aug 13, 2024
Merged

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

merged 3 commits into from
Aug 13, 2024

Conversation

cgodo
Copy link
Contributor

@cgodo cgodo commented Aug 6, 2024

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>

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected C: VOverlay VOverlay labels Aug 13, 2024
@KaelWD KaelWD added this to the v3.6.x milestone Aug 13, 2024
@KaelWD KaelWD merged commit 2c36fff into vuetifyjs:master Aug 13, 2024
5 checks passed
@KaelWD KaelWD changed the title fix(VOverlay): overlays without activators and scrim click fixes in Shadow DOM fix(VOverlay): close on scrim click in Shadow DOM without activator Aug 13, 2024
@jonathanestefani jonathanestefani mentioned this pull request Sep 24, 2024
Open
@aurelienfvre aurelienfvre mentioned this pull request Nov 10, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
C: VOverlay VOverlay T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v3.6.x
Development

Successfully merging this pull request may close these issues.
2 participants
@cgodo @KaelWD