Compatibility with jarstone/bs5-toast

[lekoala]

Hi again! While I know that bs5 compatibility is not a complete goal, I'm still wondering why this is not working

I'm using https://github.com/jarstone/bs5-toast and here is a sample codepen

https://codepen.io/lekoalabe/pen/wvPygrg (you can uncomment the inclusion of boostrap 5 js and see that it works, i simply alias bsn to window.bootstrap so that calls to window.bootstrap.Toast works)

The library is only calling the following features

 this.bootstrapToast = new bootstrap.Toast(this.element, {
        animation: this.#animation,
        autohide: this.#autohide,
        delay: this.#delay
      });
 show() {
      this.bootstrapToast.show();
    }
    hide() {
      this.bootstrapToast.hide();
    }

any reason why it doesn't work ? it seems it's not adding the fade/show classes. maybe it's a codepen only issue, because it seems to work just fine in my local project.

actually the real issue i have, that is not on the codepen, is that the "dismiss" cross is not doing anything when clicking on it. regular toasts (added from html) work fine.

[thednp]

Easy

<script src="https://cdn.jsdelivr.net/npm/bootstrap.native@4.1.0/dist/bootstrap-native.min.js"></script>

On a second read: I don't know anything about jarstone.

[thednp]

Are we good to close this one?

[lekoala]

Well no. If you change the version to 4 and click the button you will see that the dismiss icon doesn't work

[thednp]

I don't understand. You want to use BSN V4 with a V5 compatible script?

[lekoala]

No no sorry I wasn't clear. Use the latest version of BSN . The toast from html works as expected but the one generated appears but the dismiss icon doesn't work

[thednp]

I see. I've inspected the codepen and I see that the dismiss button of the Toast has the right attributes and event listener attached. For some reason, other event listeners (which are many of them) interfere in a way I cannot determine, I believe it has to do with this script bs5-toast/dist/bs5-toast.js, I don't know what is going on.

I suspect the script generates a toast markup and then creates a Toast instance, but something is messed up, I cannot figure out, it needs to be reworked. I don't recommend using Element.innerHTML, try and use document.createElement.

[thednp]

In short, you need to make sure the order is right:

• add toast item to page (make sure to have valid markup)
• initialize
• call show() via button action or whatever your logic needs

The original library works because event delegation, ours is more strict.

[lekoala]

Ok it's still a bit unclear what needs to be fixed here. The bs5 toast lib does mostly that: insert html, call new and then show. In fact the dismiss element is found by BSN toast it just seems clicking on it never triggers the actual event. Since the element is there upon init I don't see why it's failing.

[thednp]

I say do your own script, make it use createElement instead of Element.innerHTML and it should work. The initial Toast demo was like that.

[thednp]

One more thing: be sure your toast is in the DOM when initialized.

[lekoala]

When I look at bs5 toast that's what it does: insert in html then calling new. Sure it's using innerhtml but as far as I know that shouldn't be an issue ? Why would createElement work any better ?

[thednp]

I'm not 100% sure why, I still suspect the bs5.toast script relies on the delegated events of the original BS library, but here is a fork of your codepen, everything working properly with a custom createToast utility similar to your script. So you see, you have all the power to do everything you want, now you can make it work your way.

Let me know how it goes, have fun.

[thednp]

Looking at the size of jarstone/bs5.toast I think the developer should be aware of BSN compatibility and not the other way around.

In conclusion, I think my above comment will provide a much better solution. I consider this to be solved.

[lekoala]

fyi, i think i found the issue, it's simply because the lib adds the dismiss button twice and hide one of them. therefore, it's not working. in bs5, since it's delegating, it accepts any number of dismiss icon while bsn native assumes (for good reasons) that there should be only one.