flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

When using a wrapper component then Flowbite pages/components are not working

Open Antebios opened this issue 1 year ago • 2 comments

I created a website page template that sets my sites basic look and feel, but when I pass the main section as a CHILDREN prop then the Flowbite events do not fire. I did lot of experimentation and the culprite is the wrapper. Here is a basic example of how it is setup.

import { Component } from "solid-js";

// Define the layout component
const Layout: Component = (props) => {
  return (
    <div>
      <header>
        {/* Add header content here */}
      </header>
      <main>
        {/* Render the page component here */}
        {props.children}
      </main>
      <footer>
        {/* Add footer content here */}
      </footer>
    </div>
  );
};

// Define a page component
const HomePage: Component = () => {
  return <h1>Welcome to my website!</h1>;
};

// Use the layout component to wrap the page component
const App: Component = () => {
  return (
    <Layout>
      <HomePage />
    </Layout>
  );
};

If you set a simple button and tooltip within the Home Page it will not activate. But if you duplicate the exact same code into the App component directory or just comment out the "Layout" tags then it works just fine.

Is there something I'm just not configuring correctly? I even attempted to import flowbite into every component but it makes no difference. I tried setting this up in Stackblitz but it doesn't compile.

Antebios avatar Apr 18 '23 05:04 Antebios

I also discovered that using lazy loading breaks Flowbite as well. But my workaround for the whole issue is to put my code in the App.tsx and wrap my router with decorator code.

Antebios avatar Apr 18 '23 15:04 Antebios

Related to: #530. Someone may find it useful!

Blagoj5 avatar Nov 04 '23 16:11 Blagoj5