I’ve been stuck on a particularly strange issue using Phoenix LiveView and Bootstrap.

I have a button on the page which opens a bootstrap modal when clicked. Inside the modal is a form.

When I add a phx_submit and phx_change liveview hook to the form_for tag, i encounter a bug, as the modal is closed as soon as the user begins interacting with the form (due to the phx_change) or hits the submit button (due to phx_submit).

I tried to add a regular HTML form with text inputs and a submit button, and attached a javascript submit handler that just called “preventDefault” on the form itself. The modal did not become hidden when submitting the form, as it does with form_for and the associated liveview hooks.

This is a liveview that is live_rendered on a page which is a classic phoenix view. The modal’s backdrop remains open, as it is rendered from the bootstrap JS outside of the liveview. However the modal itself is rendered from within the liveview and closes. The modal backdrop maintains the classes “modal-backdrop fade show”, but the modal itself loses the “show” class and only has “modal fade” once this behaviour occurs.

I’ve tried trimming both event handlers to simply return {:noreply, socket} however the problem persists. I’ve carefully inspected the DOM to try to see what is being changed, but haven’t found anything that would help. If anyone has any suggestions that might help, I would be very grateful.