Toast-timing is very inconsistent.

[Glitchy-Tozier]

Before opening:

• Search for duplicate or closed issues Done, couldn't find any.
• Validate any HTML to avoid common problems. Done, just two warnings because I generate some stuff with JS.
• Read the contributing guidelines Done.

Toast-timing is very inconsistent.

Sometimes it's the regular delay (for example 10 seconds), but sometimes the toast just disappears way quicker.

• Operating system and version: Linux Mint 20.1 Cinnamon
• Browser and version: Firefox
• I'm not sure how to compile that code into a test-case but I took a screen capture:

BootstrapToasts.mp4

[alpadev]

I think we need to clear the timeout in the hide() method as well. 🤔

[Glitchy-Tozier]

Probably something like this.

The way i now got around this issue was by making the Toast a global variable in JS and then always doing toast.dispose() before showing it again.

[GeoSot]

@RyanBerliner any opinion on this, as you recently had a look on toast.js?

[RyanBerliner]

I don't believe clearing the timeout in the hide method would fix this issue (though it certainly wouldn't hurt), because the timeout is already being cleared in the show method. This looks to be the same bug that was fixed with #31155 - so I'd first recommend checking if version v5.0.0-alpha2 or later is being used.

[Glitchy-Tozier]

I used the version recommended in the bootstrap-dokumentation.

No idea whether that's tha alpha or not though.

[alpadev]

I don't believe clearing the timeout in the hide method would fix this issue (though it certainly wouldn't hurt), because the timeout is already being cleared in the show method. This looks to be the same bug that was fixed with #31155 - so I'd first recommend checking if version v5.0.0-alpha2 or later is being used.

I agree, this shouldn't happen. In the video the OP dismissed the toast so I considered the problem is with hide() not clearing the timeout. But looks like the problem in general is when the click handler looks something like this:

button.addEventListener('click', () => {
  const toast = new bootstrap.Toast(toastEl);
  toast.show();
});

Hard to tell because we don't know what the code looked like, but

The way i now got around this issue was by making the Toast a global variable in JS and then always doing toast.dispose() before showing it again.

suggests the OP used a code similiar to my example. In that case the timeout may not be cleared and could overlap, thus result in a behaviour like in that video.

[Glitchy-Tozier]

@alpadev Yep, that's pretty much what I did.

[AucT]

if you still need a fix, I've posted here #37577 (comment)