CSS Tabs loose state when page is live-updated

[AndrewDryga]

trafficstars

Describe the bug We are using Phoenix LiveView and when the page is updated tabs loose the state. Please see https://github.com/firezone/firezone/issues/2657 for the video.

Expected behavior There should be no compatibility issued with LiveView, Rails StimulusReflex, etc.

Desktop (please complete the following information):

• OS: MacOS 12.6.5
• Browser: Chrome
• Version: 119.0.6045.123

[unematiii]

You should toggle classes such as hidden for tab content; and aria-selected attribute together with tab styling using Phoenix JS commands, which are patch aware.

[AndrewDryga]

The issue is not that tabs don't work but that on each update the user is reset to the first tab. We had to write some ugly hacks to save the state of tabs in the LiveView socket to control which tab is open.

[unematiii]

That exactly what I'm saying, classes that FlowbiteJS has applied to elements are removed when DOM patch (update) occurs, resetting the tabs back to its initial state. This applies to all sorts of components that rely on Flowbite JavasScript functionality: modals, drawers etc. The best I've come up so far is to apply those classes using https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html and not rely on init attributes.