Toast will not autoclosed

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.) https://mdbootstrap.com/snippets/vue/tobias-weber/4649599

Add comment

Tobias.Weber priority answered 1 year ago

0 0 Best answer

"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:

<pre class="prettyprint"><code>const openToast = () => {
emit('show')
_clearTimeout()
setupAlignment()

displayStyle.value = 'display: block'

const complete = () => {
    emit('shown')
    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 {
 complete()
 }
})}
</code></pre>

Is for the animation a special browser function needed?

Please insert min. 20 characters.

"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 = () => {
emit('show')
_clearTimeout()
setupAlignment()

displayStyle.value = 'display: block'

const complete = () => {
    emit('shown')
    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 {
        complete()
    }
})}

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 (https://mdbootstrap.com/support/angular/animations-not-working-in-latest-version-of-chrome/) 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.

Please insert min. 15 characters.

Bartosz Cylwik staff commented 1 year ago

Thanks, we will look into this. Best Regards!

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

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!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

Tobias.Weber

10Support score
9Questions 1Answers 4Snippets