Toast overlay is not reseted properly

[pokecheater]

Hi there :),

it seems to me, that your toast object is not cleaned up properly when it fades out. Let me clarify what I am meaning with some pictures:

This is the initial state:

After displaying the toast the object got some different classes and overlays my content so I am not able to click on it afterwards. By cleaning up the classes manually my application gets usable again:

During displaying the toast:

After the toast is gone the div container for the toast got some different classes and remains on my screen so it blocks my content:

[pokecheater]

I found out what the issue caused. Because I need that the main application div after the body tag has an explicit height the style also affected the div of the toasted container. By adapting my css rule so that only the main div container gets the height the problem was solved :).

But this might be an issue for others. So I think after the last toast is gone the container element should reseted to it's initial state.

This is easly acchievable by 5 lines of code. So maybe you can add this to the destcrutor function of a toast. Until then here is a solution that can be copied into the initializing code block for vue-toasted.

Because close button does not trigger the onComplete function (this seems to be an already known issue: https://github.com/shakee93/vue-toasted/issues/60) I had to add it at the end of the onclick and onComplete function:

action : { text : 'Close', onClick : (e, toastObject) => { toastObject.goAway(0); let toastElement = document.querySelector(".toasted-container"); if(!toastElement.childElementCount <= 1) { toastElement.classList.forEach(className => { toastElement.classList.remove(className); }); } } }, onComplete: (e, toastObject) =>{ let toastElement = document.querySelector(".toasted-container"); if(!toastElement.childElementCount <= 1) { toastElement.classList.forEach(className => { toastElement.classList.remove(className); }); } }