themesberg / themesberg/flowbite

[Question] LiveView Re-render Breaks Flowbite's Interactive Elements (Dropdown)

Open
#1,108 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Hello folks,

I'm building a table with LiveView and Flowbite (using the "advanced table" block as a reference) and have run into an issue with dynamic content.

The table supports pagination and filtering, which are handled by performing a new database query and updating the LiveView's assigns. This works perfectly for the data itself.

However, each row has a "three-dots" button that should open a Flowbite dropdown menu for actions (edit, delete, etc.). This button works on the initial page load, but it stops working after any LiveView update, such as changing the page or applying a filter.

I've confirmed that the button's HTML is re-rendered correctly, but the click event no longer triggers the dropdown.

Is this a known issue with integrating Flowbite and LiveView? Am I missing a step to re-initialize the Flowbite components after the DOM is updated? Any guidance would be greatly appreciated

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with a LiveView table using pagination or filtering and Flowbite's three-dots dropdown. Start by reviewing how Flowbite initializes interactive elements after LiveView updates; done means the dropdown still opens after the table content is re-rendered.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, tailwindcss, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.