Toast is not closing in andriod application.

[svambati]

Versions

• 1.0

Describe the bug

Toast is not closing automatically even though we have set timeout.

Expected behavior

Toast has to be closed after certain time.

Steps to reproduce

Reproduction demo.
Steps:

1. Install normally
2. Set up plugin
3. ...

Your Environment

Andriod Phone - Cromium 33

Additional context

[svambati]

I see this is fixed in latest release in v2. But not sure whether it would be compatible with vue 2

[Maronato]

Hello @svambati!

Thank you for reporting this, but I'm afraid I've not been able to reproduce the issue.
I'm running Chrome 86 on Android 10 and both the demo and this codesandbox work fine on it.

The demo is still running v1.x and the codesandbox is running 1.7.8, so maybe the issue lies elsewhere.

Can you provide a way to reproduce your setup so I can help you debug it?

[cyberco]

I have the same problem in my Vue 3 + TypeScript application. The notification doesn't disappear.

[Abdulrahmanh995]

@Maronato So do I, I'm working with Vue 3 JavaScript application and the toast is not closing automatically after timeout exceeds.

[Abdulrahmanh995]

@svambati @cyberco
For now, I'm just hacking around in order to make it work using a custom hook (composable):

export default function useToastr() {

function message(type, msg, options) {

    const toast = useToast();
    const toastId = toast[type](msg, options);
    
   setTimeout(() => {
        toast.dismiss(toastId);
    }, options.timeout || 5000);
}
function success(msg, options) {
    message('success', msg, options);
}

function error(msg, options) {
    message('error', msg, options);
}

return {
    error,
    success
}

}

[Maronato]

@cyberco @Abdulrahmanh95 which versions are you using (both Vue, Vue-toastification and browser)?

Also, are you able to setup a minimal repo or codesandbox in which the issue occurs?

I've not been able to reproduce it.

[Maronato]

Here is a codesandbox showing that the toasts do disappear with Vue 3.0.2 and Vue Toastification 2.0.0-beta.7:

Please keep in mind that, because of a recent vue commit, there are some issues regarding mismatched versions of vue and its compiler that lead to kebab-case events not firing correctly(also here, here and here). Incidentaly, there has been a recent issue filled here on Vue Toastification that reported the same problem and, since then, only vue >=3.0.2 is supported.

Make sure that your Vue installation is up to date and report back if the issue persists. Take a look inside your package-lock and make sure that both vue and @vue/compiler-sfc are on ^3.0.2.

[svambati]

@svambati @cyberco
For now, I'm just hacking around in order to make it work using a custom hook (composable):

export default function useToastr() {

function message(type, msg, options) {

    const toast = useToast();
    const toastId = toast[type](msg, options);
    
   setTimeout(() => {
        toast.dismiss(toastId);
    }, options.timeout || 5000);
}
function success(msg, options) {
    message('success', msg, options);
}

function error(msg, options) {
    message('error', msg, options);
}

return {
    error,
    success
}

}

[Maronato]

Closing this since no reproduction steps have been provided and it really seems like a duplicate of #137