How to use Vuetify`s <v-dialog> with activator="parent" inside of <v-icon>

Question

I`ve encountered this problem many times now...

Whenever putting a <v-dialog> with activator="parent" into a <v-icon> component - the dialog does not open when clicking the icon.'

e.g.:

<v-icon icon="mdi-check">
    <v-dialog activator="parent">
        WONT OPEN ON ICON CLICK
    </v-dialog>
</v-icon>

Why does not trigger the activator like basically all other vuetify components? Is there a quick workaround for this without adding custom click handlers etc...?

Answer 1

The reason is that <VIcon> will replace anything in the default slot with the icon and thus <VDialog> inside is no longer there.

Ref: https://github.com/vuetifyjs/vuetify/blob/a30a85973d0f8f7b59ed30f7a147bbed8e0ba330/packages/vuetify/src/composables/icons.tsx#L104

You can wrap the icon with a button, which is also better regarding UX (icon button has hover and click effect)

<template>
  <v-btn icon variant="text">
    <v-icon icon="mdi-check" />
    <v-dialog activator="parent"> WONT OPEN ON ICON CLICK </v-dialog>
  </v-btn>
</template>

playground

Or the following if you don't want to use <VBtn>

<template>
  <v-dialog>
    <template #activator="{ props }">
      <v-icon icon="mdi-check" v-bind="props" />
    </template>
    WONT OPEN ON ICON CLICK
  </v-dialog>
</template>