Open Duartemartins opened 4 days ago
This is caused by the backdrop div generated by flowbite. I cannot access the Modal class to generate the backdrop with different options.
Extremely hacky workaround for the time being:
// app/javascript/custom/modal.js
// Function to remove the modal backdrop div if it matches the criteria
document.addEventListener('turbo:load', () => {
function removeModalBackdrop() {
const backdrop = document.querySelector('div[modal-backdrop][class*="bg-gray-900"]');
if (backdrop) {
try {
backdrop.remove();
console.log('Modal backdrop removed.');
} catch (error) {
console.error('Error removing backdrop:', error);
}
} else {
console.log('No backdrop found to remove.');
}
}
// Create a new MutationObserver instance to monitor DOM changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(node => {
// Check if the added node is the backdrop or if the subtree contains it
if (node.nodeType === Node.ELEMENT_NODE && (node.matches('div[modal-backdrop][class*="bg-gray-900"]') || node.querySelector('div[modal-backdrop][class*="bg-gray-900"]'))) {
removeModalBackdrop(); // Attempt to remove the backdrop if it's added
}
});
}
});
});
// Configuration for the observer: watch for the addition of child nodes and changes in the subtree
const config = { childList: true, subtree: true };
// Start observing the entire body of the document for changes
observer.observe(document.body, config);
// Perform an initial check in case the backdrop is already in the DOM when the script runs
removeModalBackdrop();
});
importmap.rb: pin_all_from "app/javascript/custom", under: "custom"
Hey @Duartemartins,
Can you please try with v2.4.1 too?
Cheers, Zoltan
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:
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 (please complete the following information):
Smartphone (please complete the following information):
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:
application.js:
tailwind-config.js: