accordion resets on lv updates

[IdoLeshkowitz]

noticed something weird that happens when I use the 'live_view_js' js_lib option, any update on the page will reset the accordion selected item.

[IdoLeshkowitz]

reproduce instructions
petal components version - 2.7.4
phoenix live view version - 1.0.0-rc.7
a minimal live view with the accordion an another element that will be updated

def mount(_params, _session, socket) do
socket = assign(socket, :flag, false)
{:ok, socket}
end
def handle_event("toggle", _, socket) do
socket = assign(socket, :flag, not socket.assigns.flag)
{:noreply, socket}
end
def render(assigns) do
~H"""

<%= @Flag %>
<.accordion open_index={0} class="w-full" js_lib="live_view_js">
<:item heading="Accordion">
<.p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</.p>
</:item>
<:item heading="Accordion 2">
<.p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</.p>
</:item>
<:item heading="Accordion 3">
<.p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</.p>
</:item>
</.accordion>
<.button phx-click="toggle">click me</.button>

"""
end

[IdoLeshkowitz]

accordion_showcase.mov

[mitkins]

Hi @IdoLeshkowitz. Yes, you're right. Looking at the design of the accordion with live_view_js - data isn't persisted. This isn't a problem with the alpine_js version - because of the general mechanism for Alpine.js that protects/copies client data between Live View renders.

So for the live_view_js version, there would need to be some kind of persistence (either through a hook or some kind of local storage mechanism). This isn't really a problem for something like the dropdown - because when you interact with something else, the menu is supposed to disappear.

If you wanted to implement something, PRs are welcome 😸

Alternatively, you could add this request to the Petal Components roadmap. If it gets enough votes, then we can prioritise it!