Liveview update resets Bootstrap collapse

Phoenix Forum Questions / Help
, ,
1

Hello,

on my liveview application I used for some elements the Bootstrap collapse functionality. It works fine and looks great, however when some handle_events happen(for example a form validation) and the liveview updates its state, every collapse component reset to their initial states.

Are there work arounds for this Problem or other ways to implement this?

Thanks

2

I haven’t used Bootstrap in a while, but if that collapse functionality relies on class changes, then you’d need to configure LiveView to copy over those classes when updating the dom.

For integration with client-side libraries which require a broader access to full DOM management, the LiveSocket constructor accepts a dom option with an onBeforeElUpdated callback. The fromEl and toEl DOM nodes are passed to the function just before the DOM patch operations occurs in LiveView. This allows external libraries to (re)initialize DOM elements or copy attributes as necessary as LiveView performs its own patch operations. The update operation cannot be cancelled or deferred, and the return value is ignored.

For example, the following option could be used to guarantee that some attributes set on the client-side are kept intact:

onBeforeElUpdated(from, to){
  for (const attr of from.attributes){
    if (attr.name.startsWith("data-js-")){
      to.setAttribute(attr.name, attr.value);
    }
  }
}

In the example above, all attributes starting with data-js- won’t be replaced when the DOM is patched by LiveView.
source: JavaScript interoperability — Phoenix LiveView v0.20.0