Toast stuck on `.showing`

[justlevine]

For some reason, when trying to initialize my Toasts, they get stuck on .showing, and never actually appear.

Calling elem.Toast.show() or elem.Toast.hide() in the console doesn't do anything while the class is .showing. If I manually change .showing to .show and then run elem.Toast.hide(), the toast is hidden; however, if I try to run elem.Toast.show() again, it gets stuck at .showing.

Using BSN v3.0.10....

my js:

import Toast from 'bootstrap.native/dist/components/toast-native.esm';

const toasts = document.querySelectorAll('.toast');
toasts.forEach((toast) => {
    const toastInit = new Toast(toast);
    toastInit.show();
});

my html:

<aside class="notifications toast-container toast_area--bottom notifications--bottom" aria-live="polite" aria-atomic="true">

    <div class="toast toast--error" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-delay="">
        <div class="toast-header">
            <strong class="toast-header__text mr-auto">Test</strong>
        </div>

        <div class="toast-body">
            <span class="toast-body__text">This is a test error</span>
            <a class="btn" src="#">Learn More</a>
        </div>

        <button type="button" class="toast-close close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>

    </div>
</aside>

Suggestions?

( BSN Version 3.0.10 )

[thednp]

Missing or incomplete CSS? Our emulateTransitionEnd actually checks the transitionDuration before executing anything that should follow animations.

[justlevine]

@thednp That solved it - Thanks !

I had to add transition manually to .toast, because its not part of Bootstrap default stylesheet](https://github.com/twbs/bootstrap/blob/v4.5.2/scss/_toasts.scss). Did it live elsewhere?

As such, might I suggest using a transitionFallback when there is no transitionDuration defined - or at least making a note in the documentation that adding a transition-duration to the css is necessary?

[thednp]

Check out the emulateTransitionEnd it already has a fallback. If there is no transitionDuration, it will execute the callback after 17ms.

[justlevine]

Sorry I assumed... Then why is it stalling if transition or transition-duration isn't manually defined?...

I tested this on a webpack build of both bootstrap and bootstrap.native. Going to see if I can replicate the issue in codepen and report back.

[thednp]

Because the CSS is missing or incomplete. If you have set transition-duration:500ms and nothing else in regards to transition, this could be the issue, there is no transition to wait for, I'm going to check and fix the emulateTransitionEnd to also check for incomplete CSS.

[thednp]

I think this falls to you to make sure the CSS is in good order.

[justlevine]

Because the CSS is missing or incomplete.

That's what I'm not understanding. Where in bootstrap's css is this defined?

I'm using bootstraps build process, and _toasts.scss (and most everything else) is included. And as I wrote, I combed through the bootstrap source (and the compiled bundle), and I don't see transition or transition-duration defined on any of the relevant css classes.

If you have set transition-duration:500ms and nothing else in regards to transition, this could be the issue

I was using the vanilla bootstrap so neither transition nor duration were defined, and the fallback timeout didn't work. 🤷‍♂️

[thednp]

BS4 has changed their designations, some transition and related stuff is moved to another scss file(s), I was confused myself back then.

But before you do anything, make sure your element has the fade class.

[thednp]

@justlevine we good? This looks better::

import Toast from 'bootstrap.native/dist/components/toast-native.esm';

let toasts = document.getElementsByClassName('toast'); // use the fastest blade in the selectors

Array.from(toasts).forEach((toast) => { // querySelectorAll / getElementsByClassName don't return arrays !!
  new Toast(toast).show(); // you can do this directly, no need to alocate memory for it
})