how to avoid surprises with bootstrap5's javascript

[laoshaw]

https://htmx.org/examples/modal-bootstrap/ is a demo, but I don't really understand how it avoids possible javascript conflicts between bootstrap5 and htmx? what's the key?
what about other bootstrap5 widgets that use javascript, are there some general rule to follow so I can use bootstrap5+alpine.js+htmx without surprises on the js conflict side?

[schungx]

I use Bootstrap 5.3 with htmx with no problems at all.

[patkon]

Same here

[laoshaw]

a potential problem though, is when bootstrap and htmx are both using javascript to work on the same element, it could happen, I just don't get how the modal example above worked around it, still new to htmx

[schungx]

Me either. It just works with no fuss.

Seems like htmx and bootstrap stays out of each other's way.

Only place where I encountered trouble is actually accordions. If I replace an entire accordion item it doesn't work... So I must only replace the innards of the accordion, not the whole thing.

There must be a solution somewhere though....

[laoshaw]

I'm a bit concerned at this point to use bootstrap 5 with htmx bug-free, but I do need use bootstrap, could not find any info online other than the modal example so far. Either htmx can work with bootstrap side by side without any potential issues(unlikely), or there are good documentation about how to work around those bootstrap widgets(quite a few)'s javascript operations.

[schungx]

Well, I have a large LOB app that uses HTMX and Bootstrap 5.3. No surprises except for accordions so far.

[Telroshan]

Hey,

If I replace an entire accordion item it doesn't work... So I must only replace the innards of the accordion, not the whole thing.

That's exactly what the modal demo is doing indeed ; notice the button's target:

<button
    hx-get="/modal"
    hx-target="#modals-here"
    hx-trigger="click"

As no hx-swap is defined, the default swap style is used, thus innerHTML

So, this replaces the content of the #modals-here div, but leaves that div itself intouched. Bootstrap is targeting that very div with data-bs-target="#modals-here", which is why it works with no issue in this case ; bootstrap only cares about the root element to toggle the modal, and sets its inline style, aria-hidden attributes as well as toggling some CSS classes on it. Whereas htmx doesn't touch that root element and only updates its content, its innerHTML.

This is a general rule of thumb to make htmx work with any frontend library ; as long as you don't touch the same elements (or any of its parents), there's no reason to encounter any issue.
Now, if bootstrap were to do some attributes updates to any of the modal's children, you would have issues of course.

When you don't have any other choice than mess with the same element as the lib's one, those libraries generally provide fallbacks to manually trigger their UX logic from a script. In this case, you could listen for htmx events and manually trigger those events required to make the lib work as it should.

Hope this helps!

[laoshaw]

Very helpful. Thank you!