Topic: Toast will not autoclosed
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
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!
"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 2 years 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 pro premium priority commented 2 years 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.
Bartosz Cylwik staff commented 2 years ago
Thanks, we will look into this. Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 3.1.1
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes