[Feature Request] Add ability to listen for transition events on v-dialog

[rdsn]

Problem to solve

Sometimes it is needed to run some code when v-dialog closes but do it only after closing animation ends, the problem is that at the moment there seems to be no way to determine when it ends.

Proposed solution

A possible solution would be to pass $listeners from v-dialog to the transition component. E.g.

if (this.transition) {
  dialog = h('transition', {
    on: this.$listeners,
    props: {
      name: this.transition,
      origin: this.origin
    }
  }, [dialog]);
}

So that it could be used like this:

<v-dialog v-model="isDialogActive" width="500" @after-leave="runSomeCode">

[KaelWD]

Related: #5516

[b-strauss]

Use this function to patch the original component and forward the $listeners object.

import {VDialog as VDialogOriginal} from 'vuetify/lib';

/**
 * Hack to patch VDialog because it has no way to set transition hooks
 */
function patchVDialog (VDialog) {
  const ExtendedVDialog = VDialog.extend({});
  const originalRender = ExtendedVDialog.prototype.constructor.options.render;

  ExtendedVDialog.prototype.constructor.options.render = function (h) {
    const originalH = h;
    h = (...args) => {
      // Check for the call to render a transition,
      // there is only one rendered transition in VDialog
      if (args[0] === 'transition') {
        // Forward the user provided listeners to the transition component
        args[1].on = this.$listeners;
      }

      return originalH(...args);
    };
    return originalRender.call(this, h);
  };

  return ExtendedVDialog;
}

// This can be used now in place of the original.
const VDialog = patchVDialog(VDialogOriginal);

[brunlid]

Any news on when there will be working transition hooks for v-dialog? I cannot get any of transitionend or after-enter to trigger. Thank you

[flyingL123]

Trying to figure out the status of this? Should it be working at this point or it's not implemented? I am not having any luck using transition callbacks on v-dialog.

[flyingL123]

In my case I need this functionality to properly set the width of an element that is part of the dialog content. It depends on the width of other elements in there, and I can't simply set it as soon as the dialog's model value changes because the content is not yet fully rendered as it is transitioning in.

[nclemeur]

I agree that this would be useful. I have the same use case as @flyingL123 with a SVG drawing that needs to be updated with the correct size. Currently I am doing this with a setTimeout, but this is a bit ugly.

[LZQCN]

Temporary solution:
v-snackbar

watch: {
  value(newValue, oldValue) {
    if (!newValue && oldValue) {
      snackbarEl.addEventListener('transitionend', () => {
        // code
      }, { once: true });
    }
  },
}

v-dialog

setTimeout(() => {
  // code
}, 300);

[gustavosbarreto]

Use this function to patch the original component and forward the $listeners object.

import {VDialog as VDialogOriginal} from 'vuetify/lib';

/**
 * Hack to patch VDialog because it has no way to set transition hooks
 */
function patchVDialog (VDialog) {
  const ExtendedVDialog = VDialog.extend({});
  const originalRender = ExtendedVDialog.prototype.constructor.options.render;

  ExtendedVDialog.prototype.constructor.options.render = function (h) {
    const originalH = h;
    h = (...args) => {
      // Check for the call to render a transition,
      // there is only one rendered transition in VDialog
      if (args[0] === 'transition') {
        // Forward the user provided listeners to the transition component
        args[1].on = this.$listeners;
      }

      return originalH(...args);
    };
    return originalRender.call(this, h);
  };

  return ExtendedVDialog;
}

// This can be used now in place of the original.
const VDialog = patchVDialog(VDialogOriginal);

@b-strauss Can you give a complete example of using this hack?

[b-strauss]

@gustavosbarreto

you need to include the patched VDialog to use inside your template

const VDialog = patchVDialog(VDialogOriginal);

export default {
  components: {
    VDialog,
  },
};

Then in the template just add your listeners to the patched component.

<v-dialog @after-enter=""></v-dialog>

[alekstar79]

@gustavosbarreto

you need to include the patched VDialog to use inside your template

const VDialog = patchVDialog(VDialogOriginal);

export default {
components: {
VDialog,
},
};

Then in the template just add your listeners to the patched component.

<v-dialog @after-enter="">

Vuetify 2.5.10 patch does not work. I looked at the sources and implemented a working patch

import { VDialog as VDialogOriginal } from 'vuetify/lib'

function patchVDialog(VDialog)
{
    return VDialog.extend({
        methods: {
            genTransition()
            {
                const content = this.genInnerContent()

                if (!this.transition) return content

                return this.$createElement('transition', {
                    on: this.$listeners,
                    props: {
                        name: this.transition,
                        origin: this.origin,
                        appear: true
                    }

                }, [content])
            }
        }
    })
}
export const VDialogPatched = patchVDialog(VDialogOriginal)

[sk8killer]

@alekstar79 this doesn't work... can't catch @leave-enter...

[charlesg99]

I was reading the documentation to find this exact behavior and it isn't mentioned. Glad I can do it as @after-leave works on the v-dialog element, but it would be nice to add thoses events to the api page.

[johnleider]

I was reading the documentation to find this exact behavior and it isn't mentioned. Glad I can do it as @after-leave works on the v-dialog element, but it would be nice to add thoses events to the api page.

I've added information regarding the events in 8083d89