search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.35k stars 711 forks source link

CSS Tabs loose state when page is live-updated #721

Open AndrewDryga opened 8 months ago

AndrewDryga commented 8 months ago

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):

unematiii commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.