Topic: Toast will not autoclosed

Tobias.Weber priority asked 1 year ago

Expected behavior Toast will be closed after delay time

Actual behavior Toast will not be closed. Close button is as well not working.

Do I have to import a special JS-File from MDB to get it working?

Resources (screenshots, code snippets etc.)

Tobias.Weber priority answered 1 year ago

"Is it not working in your project?" No "Did you have any message in console for that?" No error or other messages "Did you check if any other pro components are working?" Autocomplete, DataTable for example is working.

I have done some debugging. Please have a look on my comment in the code:

const openToast = () => {

displayStyle.value = 'display: block'

const complete = () => {
    off(toastRef.value, 'transitionend', complete)

    if (props.autohide) {
        timeoutValue.value = setTimeout(hide, props.delay)

nextTick(() => {
    setTimeout(() => {
        showClass.value = true
    }, 0)

    if (props.animation) {
        **// this line is not working on my Browser correctly 
        // the complete function will never executed
        // if i turn of animation it will work correctly**
        on(toastRef.value, 'transitionend', complete)
    } else {

Is for the animation a special browser function needed?

Bartosz Cylwik staff commented 1 year ago

It should work without setting any new browser functions. I cannot reproduce your problem. Have you checked any other browsers if you have the same issue? Could you check if MDBAlert component is working fine in your project? Did you experience animation problems with our other components? Although unlikely, maybe refresh with ctrl + shift +r could help.

Tobias.Weber priority commented 1 year ago

I found this old case ( and this is the solution. In the Windows Settings Animations was turned off in my machine. I switched it on and it will work. Alert and Toast will be closed automatically. The next problem is i don't know the setting of my web application users. If a user have animations disabled my website will not work correctly if i'm using animations. I think the controls should check the os settings.

Bartosz Cylwik staff commented 1 year ago

Thanks, we will look into this. Best Regards!

Bartosz Cylwik staff answered 1 year ago

Hello! From what I can see on your snippet and our repository the toast is closing after duration set in delay props and after click on X. Is it not working in your project? Did you have any message in console for that? Did you check if any other pro components are working? Best Regards!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.1.1
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes