Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Antebios opened this issue Apr 18, 2023 · 2 comments

Comments

@Antebios
Copy link

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 Antebios changed the title When using a wrapper component then Flowbite pages are not working When using a wrapper component then Flowbite components are not working Apr 18, 2023
@Antebios Antebios changed the title When using a wrapper component then Flowbite components are not working When using a wrapper component then Flowbite pages/components are not working Apr 18, 2023
@Antebios
Copy link
Author

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.

@Blagoj5
Copy link

Blagoj5 commented Nov 4, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

No branches or pull requests

2 participants