v2.0.0-beta.5 Toast not dismissing after timeout

[J-T-McC]

Versions

v2.0.0-beta.5

Describe the bug

Toast is not dismissed after the timeout expires even though the timeoutHandler test is passing. Changing the event listeners to camel case in VtToast.vue makes the dismiss work but the timeoutHandler test no longer passes while "emits close-toast on animationend" does. Changing the event to single word (i.e. 'dismiss') throughout and all tests + timeout dismiss works

Expected behavior

Toast dismissed after timeout expires

Steps to reproduce

add v2.0.0-beta.5 package

Reproduction: demo.

Steps:

1. Install v2.0.0-beta.5
2. Set up plugin
3. Toggle toast

Your Environment

VueJS 3.0.1

Latest Chrome

[restyler]

I can confirm the bug on vue@3.0.2 + vue-toastification@2.0.0-beta.5

[emresudo]

I can confirm the bug on vue@3.0.0 + vue-toastification@2.0.0-beta.5

[Maronato]

Hello!
Thank you for reporting this and for your analysis.

I've done some digging and found that the issue seems to come from this commit on vue-next. What it does is change how the event listener name is normalized.

Here is an example from the Template Explorer showing how, before the change, the following template

<div @close-toast="doStuff">Hello World!</div>

Would get compiled to:

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", { "onClose-toast": _ctx.doStuff }, "Hello World!", 40 /* PROPS, HYDRATE_EVENTS */, ["onClose-toast"]))
}

In fact, Vue-Toastification's v2.0.0-beta.5 distribution code looks like:

typeof _ctx.content === 'string')
        ? (openBlock(), createBlock(Fragment, { key: 0 }, [
            createTextVNode(toDisplayString(_ctx.content), 1 /* TEXT */)
          ], 64 /* STABLE_FRAGMENT */))
        : (openBlock(), createBlock(resolveDynamicComponent(_ctx.getVueComponentFromObj(_ctx.content)), mergeProps({
            key: 1,
            "toast-id": _ctx.id
          }, _ctx.content.props, toHandlers(_ctx.content.listeners), { "onClose-toast": _ctx.closeToast }), null, 16 /* FULL_PROPS */, ["toast-id", "onClose-toast"]))
    ], 10 /* CLASS, PROPS */, ["role"]),

After the change, however, a handler for close-toast gets compiled to onCloseToast, as you can see it in this other example from the Template Explorer.

The same template as above now gets compiled to:

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", { onCloseToast: _ctx.doStuff }, "Hello World!", 40 /* PROPS, HYDRATE_EVENTS */, ["onCloseToast"]))
}

The fix, then, should be as simple as recompiling the library using the newest version of compiler-dom. My local tests show that once recompiled, the issues are gone.

I'll create a PR and push these changes into the next release, so please give it a try.

[Maronato]

@J-T-McC The issue seems to be fixed now. Please try it out :)

[J-T-McC]

Thanks @Maronato, all good now.