Modals are unresponsive and lack backdrop in Rails 7.1.3 with Flowbite 2.3.0

[Duartemartins]

Description In a Rails 7 application using Flowbite 2.3.0, modals appear on the page but are unresponsive—clicks on modal buttons do not trigger any actions. Additionally, the modal lacks a visible backdrop, which affects the UI's focus and usability.

Hamburger menu works fine.

To Reproduce Steps to reproduce the behavior:

1. Set up a Rails 7 application with Flowbite 2.3.0 integrated.
2. Add a modal component to a view using Flowbite's standard modal configuration.
3. Trigger the modal using a button or a link.
4. Observe that the modal appears but buttons are unresponsive and no backdrop is visible.

Expected behavior I expected the modal to not only display but also respond to interactions (e.g., closing the modal or clicking any buttons within it). Additionally, a backdrop should appear behind the modal, dimming the rest of the web page to focus user interaction on the modal content.

Screenshots Here's a screengrab.

Desktop:

• OS: MacOS
• Browser: Chrome & Firefox

Smartphone :

• Device: iPhone 15
• Browser: Safari

Additional context This issue might be related to JavaScript or CSS conflicts within the Flowbite and Rails asset pipeline integration, possibly due to the Turbolinks/Turbo Drive in Rails. Any insights or fixes would be greatly appreciated.

---

importmap.rb:

pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.turbo.min.js", preload: true
pin 'apexcharts', to: 'https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js', preload: true

application.js:

import "controllers"
import "flowbite"
import 'apexcharts'

tailwind-config.js:

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
      }
    },
    fontFamily: {
      'body': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ],
      'sans': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ]
    }
  }
}