Tailwind CSS components and interactive elements

Issue

• We have installed flowbite to our react project by following recommended steps via npm. We added it to tailwind config etc
• The code is just not working properly. The effects (e.g. tooltip) do not show on hover. If we try to import it directly (via import '@themesberg/flowbite'; we get an error document not found.
• Is it correct to inject the script just with <script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>? Is the path/to just a placeholder for another custom local path?
• We are using NextJS. I think the issue could be related to SSR but I am not sure. Any pointers?

Describe the bug if open modal with javascript, i can't close modal with javascript helper or data-modal-toggle=""

To Reproduce Steps to reproduce the behavior:

1. Go to official site: https://flowbite.com/docs/components/modal/#methods
2. open modal with javascript from chrome console
3. new Modal(document.getElementById('defaultModal'), null).show();
4. Close modal with (X) icon inside modal, not close modal!
5. no javscript error

Expected behavior close correctly modal

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser chrome
• Version 1.4.1

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I got Flowbite working together with Turbo in my Rails 7 project. The original issue was that the javascript worked until the first turbo navigation was made and stoped working after that.

According to Turbo's documentaction this happened because Flowbite uses DOMContentLoaded event to install JS behavior, but this event only fires once, in response to the initial page load. In order to install the JS behavior on every page change I replaced DOMContentLoaded to turbo:load event in dist/flowbite.js. turbo:load event fires on every page change.

I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/flowbite/dist/flowbite.js b/node_modules/flowbite/dist/flowbite.js
index 92e66fc..3659e36 100644
--- a/node_modules/flowbite/dist/flowbite.js
+++ b/node_modules/flowbite/dist/flowbite.js
@@ -32,7 +32,7 @@ const rotateAccordionIcon = accordionHeaderEl => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
     const accordionId = accordionEl.getAttribute('id');
     const collapseAccordion = accordionEl.getAttribute('data-accordion');
@@ -109,7 +109,7 @@ const toggleCollapse = (elementId, show = true) => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle target elements using [data-collapse-toggle]
   document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
     var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
@@ -150,7 +150,7 @@ const toggleModal = (modalId, show = true) => {
 };
 
 window.toggleModal = toggleModal;
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
     var modalId = modalToggleEl.getAttribute('data-modal-toggle');
     var modalEl = document.getElementById(modalId);
@@ -172,7 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /***/ 454:
 /***/ (() => {
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-tabs-toggle]').forEach(function (tabsToggleEl) {
     const tabsToggleElementsId = tabsToggleEl.getAttribute('id');
     const tabsToggleElements = document.querySelectorAll('#' + tabsToggleElementsId + ' [role="tab"]');
@@ -2208,7 +2208,7 @@ var popper_createPopper = /*#__PURE__*/popperGenerator({
 
 ;// CONCATENATED MODULE: ./src/components/dropdown.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
     const dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
@@ -2256,7 +2256,7 @@ var tabs = __webpack_require__(454);
 var modal = __webpack_require__(508);
 ;// CONCATENATED MODULE: ./src/components/tooltip.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-tooltip-target]').forEach(function (tooltipToggleEl) {
     const tooltipEl = document.getElementById(tooltipToggleEl.getAttribute('data-tooltip-target'));

This issue body was partially generated by patch-package.

Hey there, I am using a fresh project with tailwind2, flowbite 1.1.1 and vue3. The backend stack ist laravel 8 (php8) with inertia.js. If I'm creating a modal inside a Vue component, then I can't open/toggle the model (data-modal-toggle="default-modal" is set to the button) . It only works, if i move the button and modal out of the component, into the final html generated site (with Blade Template Engin). It affects not only the modal, but also the alert dismiss button and basically everything that need flowbite javascript.

Has someone the same issue and know a workaround?

Describe the bug When using Flowbite with React, if the page updates after first load to include a dropdown that wasn't originally present then the dropdown doesn't open when clicked.

I assume this applies to all JavaScript but I've not tried any others yet.

There are no console errors and nothing obvious at all in any logs. It just only ever works if the Dropdown HTML was present in the first render, and doesn't work if it was only present after an update.

My assumption is that the event listeners are bound to the HTML as it is when the JavaScript first runs, and doesn't use any mechanism to bind to changes that happen later.

Desktop (please complete the following information):

• OS: macOS 11.6.1
• Browser Firefox
• Version 96.0.3

Describe the bug

I'm trying to install Flowbite on SvelteKit. When I run npm run dev, I get an error:

document is not defined
ReferenceError: document is not defined
    at Object.745 (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:17:1)
    at __webpack_require__ (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:138:41)
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:151:16
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2245:3
    at Object.<anonymous> (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2247:12)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)

To Reproduce

Install SvelteKit:

npm init [email protected] flowbite

Install Tailwind Css and Flowbite:

cd flowbite
npm install
npx [email protected] tailwindcss
npm i @themesberg/flowbite

Update the TailwindCSS config.

In the tailwind.config.cjs file:

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/@themesberg/flowbite/**/*.js"
  ],

  theme: {
    extend: {},
  },

  plugins: [
     require('@themesberg/flowbite/plugin')
  ],
};

module.exports = config;

Adding flowbite to routes/__layout.svelte:

<script>
  import "../app.css";
  import "@themesberg/flowbite";
</script>

<slot />

Expected behavior

No error.

Screenshots

Desktop (please complete the following information):

• OS: macOS v12.1
• Browser chrome, brave

in mobile screen when the page load for the first time and you click the button to open the modal it does open, but after you go to another page and try to open another modal it does not open and you should refresh the page again and again every time you go to another page.

Describe the bug

Common expected modal functionality is to click outside of the modal to close the modal. Same goes for hitting the esc button.

To Reproduce Steps to reproduce the behavior:

1. Go to: https://flowbite.com/docs/components/modal/
2. Open any modal
3. Click outside of the modal or hit the 'esc' button on the keyboard

Expected behavior I expect the modal to close on either of those. The modal doesn't. I have to click the close button instead.

Desktop:

• OS: OSX
• Browser: Chrome & Firefox
• Version: FF99

Smartphone:

• Device: iPhone
• OS: iOS 15.4.1
• Browser: Safari

Additional context I've replicated this on my local dev and on the Flowbite demo site.

Describe the bug I have a fresh installation of Tailwindcss 3 and latest version of Flowbite installed via NPM and using Webpack 5 as my bundler. Flowbite styles are working perfectly but all JS powered elements aren't working it seems.

To Reproduce Steps to reproduce the behavior:

1. Check out https://github.com/Dizzzlectic/flowbite-test
2. Install dependencies (npm install)
3. Run the project (npm run)
4. Try to dismiss any of the alerts

Expected behavior JS elements should be working, but they don't seem to be

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 11
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 95.0.2

Additional context Add any other context about the problem here.

At the moment the dropdown offset is hardcoded to [0, 10].

It would be great to add support for a new data attribute like data-dropdown-offset="0,10". Or possibly data-dropdown-offset-x="0" and data-dropdown-offset-y="10". Easier to parse in the code but I personally prefer the first option.

Meanwhile, the workaround I found was to add Tailwind classes like !-bottom-2 to override the position.

Let me know your thoughts. Thanks for the great library!

Is your feature request related to a problem? Please describe. the methods that are described in the default quickstart guide doesn't seem to work for nuxt.js v2.15. please elaborate it.

Describe the solution you'd like a proper guide on how to integrate with some document /video on how to integrate with different frontend frameworks. (in my case vue js applications)

Describe the bug I am using Flowbite in my Node Express project where I'm using Flowbite as Tailwind Plugin. But, Node Express EJS Template Engine can not get Flowbite JavaScript. It can not dismiss the alert element, and more where JS needs to work.

To Reproduce Steps to reproduce the behavior:

1. Install Flowbite, add "./views/**/*.ejs" in tailwind config file, add require('flowbite/plugin') in tailwind config file
2. add flowbite JavaScipr file in ejs footer
3. added flowbite component
4. compile tailwind and JavaScript is not working

Expected behavior When clicking in Alert components close dismissal, the component should be removed from the view file

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 108

function updateResults(results) { // Clear the previous search results $('#search-results').empty();

                    // Loop through the search results
                    results.forEach(function(result) {
                        // Create the HTML for the search result
                        var resultHTML = `<h2 id="accordion-catalog-head-${result.id}">
                        <button type="button"
                            class="flex items-center justify-between w-full py-5 font-medium text-left border-b text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400"
                            data-accordion-target="#accordion-catalog-body-${result.id}" aria-expanded="true"
                            aria-controls="accordion-catalog-body-${result.id}">
                            <span>${result.title}</span>
                            <span data-accordion-icon
                                class="w-6 h-6 rotate-180 shrink-0 flex justify-center items-center">
                                <i class="fas fa-angle-down"></i>
                            </span>
                        </button>
                    </h2>
                    <div id="accordion-catalog-body-${result.id}" class="hidden"
                        aria-labelledby="accordion-catalog-head-${result.id}">
                        <div class="py-5 font-light border-b border-gray-200 dark:border-gray-700">
                            <p class="mb-2 text-gray-500 dark:text-gray-400">${result.information}</p>
                        </div>
                    </div>`;

                        // Append the search result HTML to the search results container
                        $('#search-results').append(resultHTML);
                    });
                }

Is your feature request related to a problem? Please describe. I've just learned about Windi CSS and it looks like a superior alternative to Tailwind. Most importantly (to me anyway): it offers better performance (for developers and users). (BTW, an interesting read: https://antfu.me/posts/reimagine-atomic-css)

Do you think that Flowbite can be used together with Windi (instead of Tailwind)? I don't know if/which modifications that would require. Maybe it just works out of the box, but if so I don't know if it would have hidden side effects.

Describe the solution you'd like Allow Flowbite to work with Windi CSS. 🥳

Describe alternatives you've considered Keep on using Tailwind. 😉

Is your feature request related to a problem? Please describe.

As the select form field is tagged with w-full, it is usually large:

However, if we remove this class, the select's caret now overlaps the content:

It would be convenient if we could remove w-full and still have a good-looking select.

Describe the solution you'd like

After we remove w-full, we get something like:

In other words, the select field is large enough so the caret never overlaps the content, whatever the selected option.

Describe alternatives you've considered

Workarounds:

• Use a fixed minimum width
• Pad options with a few   (not proud of this one)

Describe the bug With version 1.5.5 , i have a problem with CSP (Content Security Policy):

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

With the same code and flowbite version 1.5.4, all is ok (no problem with CSP).

To Reproduce I have a simple application (just header and slider, no javascript, just 'import flowbite'). I use webpack (with laravel-mix) With version 1.5.4, all is ok. Example: https://inwayvideo.com/flowbitecsp1/

With the same code, I just change version of flowbite with version 1.5.5 There is a problem with CSP.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

Example: https://inwayvideo.com/flowbitecsp2/ Use chrome and open console to show message

Code is here (in a zip file): http://inwayvideo.com/flowbitecsp/flowbiteBugCSP.zip read readme.txt to build demo

Expected behavior No message for CSP

Desktop (please complete the following information):

• Browser: same problem with chrome 108 / edge 108 / firefox 108
• Version of flowbite : version 1.5.5

Philippe