Unwanted ghost click through the toast
adrisanchu opened this issue · 0 comments
adrisanchu commented
Explanation
By default, the toast is not selectable and you can click through (which is the desired effect in most cases).
However, when there are buttons or any other clickable element underneath the toast, a user click can lead to unwanted events being fired.
Proposed solution
In SvelteToast.svelte, add a new CSS variable allowing to control pointer-events
property, keeping current behavior as default.
<style>
._toastContainer {
/* rest of the props... */
/* pointer-events: none; */
pointer-events: var(--toastContainerPointerEvents, none);
}
</style>
pointer-events: auto;
will avoid this "ghost effect".
Plus, it will allow to select the text within the toast with the mouse (which can be useful for copy/pasting!)