You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
Flowbite elements that require javascript do not work or stop working when added to the dom with a liveview update. This is especially uncomfortable when using async data fetching and using flowbite components (f.e. Accordions) or when you update dom elements with server pushes.
Expected behavior
Flowbite elements do always work, even when added to the dom with a liveview update.
Desktop (please complete the following information):
OS: MacOS
Browser: Edge
Version 124.0.2478.51
Additional context
Example:
<.async_result :let={time_entries} assign={@time_entries}><:loading><divclass="flex items-center mt-5"><spanclass="loading loading-spinner loading-lg"></span> Loading time entries and combining them with gitlab issues
</div></:loading><:failed:let={_failure}>Error loading time entries or gitlab issues</:failed><divdata-accordion="collapse" id="example-accordion"><buttondata-accordion-target={"#detail-#{issue}"}>Click me</button><divclass="hidden" id={"detail-#{issue}"}>
important informations
</div></div></.async_result>
The example-accordion's content is pushed to the client after the async data loading has finished and flowbite elements in the result will not work.
Liveview's dom hook has the ability to apply javascript to the dom elements that are pushed to the client with
letliveSocket=newLiveSocket("/live",Socket,{params: {_csrf_token: csrfToken},dom: {onBeforeElUpdated(from,to){//copy attributes from "from" to "to" or apply function on "to" }}})
But the init.... (f.e. initAccordions) functions are using document.querySelectorAll() and thus are unable to be scoped to the incoming DOM nodes.
A workaround for now is to apply a custom hook to the parent node
...
<divphx-hook="Flowbite"><divdata-accordion="collapse" id="example-accordion"><buttondata-accordion-target={"#detail-#{issue}"}>Click me</button><divclass="hidden" id={"detail-#{issue}"}>
important informations
</div></div></div>
...
This works, but triggers a lot of init functions for each update. It would be great to be able to apply the init functions to the dom elements that are updated.
The text was updated successfully, but these errors were encountered:
DennisNissen
changed the title
Phoenix Liveview: Flowbite elements that require js do not work on content pushed to the client after initial page load
Phoenix Liveview: Flowbite elements that require js do not work in content pushed to the client after initial page load
Apr 30, 2024
Describe the bug
Flowbite elements that require javascript do not work or stop working when added to the dom with a liveview
update
. This is especially uncomfortable when usingasync
data fetching and using flowbite components (f.e.Accordions
) or when you update dom elements with server pushes.Expected behavior
Flowbite elements do always work, even when added to the dom with a liveview
update
.Desktop (please complete the following information):
Additional context
Example:
The
example-accordion
's content is pushed to the client after the async data loading has finished and flowbite elements in the result will not work.Liveview's dom hook has the ability to apply javascript to the dom elements that are pushed to the client with
But the
init....
(f.e.initAccordions
) functions are usingdocument.querySelectorAll()
and thus are unable to be scoped to the incoming DOM nodes.A workaround for now is to apply a custom hook to the parent node
and in the template file
This works, but triggers a lot of
init
functions for each update. It would be great to be able to apply the init functions to the dom elements that are updated.The text was updated successfully, but these errors were encountered: