Flowbite not working on chromium based browsers.

[Sarthak001]

Describe the bug Flowbite components (modals,dropdown) not working on chromium based browsers.

To Reproduce Steps to reproduce the behavior:

1. Setup a react project using official flowbite react setup [Using vite]
2. make modal and dropdown components.
3. deploy the app
4. Modals and dropdown works on Firefox, but in Chromium it stays unresponsive(nothing happens)

Expected behavior Should be able to interact with flowbite's components (dropdown,modal)

App Setup Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser Chromium and Firefox
• Version Chromium Version 111.0.5563.64 and Firefox Version 111.0

Additional context By default flowbite's components (modals,dropdown) don't work on Firefox. To make it work on Firefox either we needed to add a import 'flowbite' statement under main.jsx (screenshot attached) or add script tag of the flowbite.js file in index.html (screenshot attached).

In tailwind.config.cjs - flowbite/plugin show this

module "/somepath/somepath/Projects/ssh-frontend/node_modules/flowbite/plugin"
Could not find a declaration file for module 'flowbite/plugin'. '/somepath/somepath/Projects/ssh-frontend/node_modules/flowbite/plugin.js' implicitly has an 'any' type.
  If the 'flowbite' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'flowbite/plugin';`ts(7016)

[aknahin]

same here. Dropdown and mobile toggle button is not working in chrome

[Sarthak001]

any potential fix for this ?

[Sarthak001]

Today i checked the bug. It started working on Chromium. Should i close this ticket ?

[javissimo]

For me it's not working so I'd keep it open. It indeed works fine in Firefox!

[sudheersuri]

I fixed it by calling initFlowbite in App.jsx, its written in documentaiton to call initFlowbite() to initialize data properties required for dropdown,modal interaction

import { useState,useEffect } from 'react'
import './App.css'
import { initFlowbite } from 'flowbite'

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    initFlowbite();
  }, []);

return (<></>);
}

[yashptel]

I fixed it by calling initFlowbite in App.jsx, its written in documentaiton to call initFlowbite() to initialize data properties required for dropdown,modal interaction

import { useState,useEffect } from 'react'
import './App.css'
import { initFlowbite } from 'flowbite'

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    initFlowbite();
  }, []);

return (<></>);
}

This worked for me

[ClemensLey]

Sudheersuri's answer also fixed it for me with React. I feel this should be mentioned more prominently in the docs.

[malikvogt]

I also have a problem with dropdowns on chromium based browsers.

I simply have a button in my navbar that toggles a dropdown with data attributes. Additionally, I have a second button in another responsive navbar for mobile view that also has a data dropdown toggle for the same dropdown menu.

This worked perfectly on all browsers until Flowbite v2.0.0, now it only works on non-chromium browsers.

How to use multiple buttons on the same dropdown? Maybe something has changed or I have missed something?