toast example is broken?

[AucT]

I guess the official bootstrap toast recommendation is to have one toast at a time in HTML, and onclick to change text and show it again (reuse).

Anyhow, today I thought to make example using official recommendation to reuse one toast and with js change color and text.
To my surprise, if you click a few times, it will have glitches. Sometimes it won't show, and sometimes it will show for 10 ms and hides.

Can you try click button Show live toast again at the end of toast and see https://getbootstrap.com/docs/5.2/components/toasts/
Or here clean copy of that code https://codepen.io/AucT/pen/OJEaRar

is it me, or this official toast example has glitches when you click button again at the end of toast.

[AucT]

Found even issue for this #33906
For now I'll use my lib that creates new toast each time.
But keep in mind, having top 1 library with bugged toast for almost 2 years is irresponsible!

[AucT]

Here you go fixed example:

const toastTrigger = document.getElementById('liveToastBtn');
const toastLiveExample = document.getElementById('liveToast');
const toastBootstrap = new bootstrap.Toast(toastLiveExample);
if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
        toastBootstrap.show();
    });
}

[mdo]

These kind of bug reports and questions where "I clicked a thing 10-20 times and it broke" are so interesting to me. Clearly we didn't spam click the docs demo we built to show off the toast positioning. Once this kind of stuff is found, it is typically super low priority for us—we're just building fast and easy code to show off one aspect of something. Sorry you feel let down by this, we're just busy with other things (Bootstrap, full time jobs, life, etc).

But, you did find a solution to the docs JS we use for this, so thanks! And appreciate you opening a PR so we can make it available to everyone and close out the old issue.