Flowbite Drawer incorrectly applies left: 0 and translateX(-100%) in Rails 7 (Turbo) environment

Aperta
  • Qualcosa non va?
#1,102 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, rails, tailwindcss
Ambito
frontend

Direzione di ricerca

Riproduci il problema nella configurazione Rails 7/Turbo usando il markup del drawer e bin/dev, quindi ispeziona l’inizializzazione di initDrawers() di Flowbite in corrispondenza di turbo:load. Traccia il motivo per cui a right-0 e translate-x-full seguono left-0 e translateX(-100%). Il lavoro è completato quando il drawer rimane nascosto fuori dallo schermo a destra e si apre da destra quando viene attivato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Title: Flowbite Drawer incorrectly slides from left in Rails 7 (Turbo) app, adds conflicting styles left: 0 and translateX(-100%)

Describe the bug
When using the Flowbite Drawer component in a Ruby on Rails 7 application (which uses Turbo by default), the drawer component incorrectly slides in from the left, even when the HTML is explicitly configured for a right-side drawer as per the documentation.

This happens in the mobile view when using the standard data-drawer-toggle button.

Inspecting the element in the developer tools reveals the bug: Flowbite's JavaScript is programmatically adding left: 0 to the drawer's class list and an inline style="transform: translateX(-100%);". These injected styles directly conflict with the right-0 and translate-x-full classes in the source HTML, causing the drawer to appear from the left.

To Reproduce
Steps to reproduce the behavior:

  1. Set up a standard Rails 7 application with turbo-rails and flowbite (e.g., via the flowbite-rails gem or NPM/Vite).
  2. In the main layout, render a header partial.
  3. In the header partial, add the HTML for a mobile-only toggle button and a drawer, using the "HTML-first" classes for right-side placement (as per the Flowbite docs). 
    <button id="mobile-menu-btn" ... type="button" data-drawer-target="mobile-menu-drawer" data-drawer-toggle="mobile-menu-drawer">
  </button>

<div id="mobile-menu-drawer" class="fixed top-0 right-0 z-50 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-blue-900 w-80">
  <button type="button" data-drawer-hide="mobile-menu-drawer" aria-controls="mobile-menu-drawer">
    </button>
  </div>
  4. Start the Rails server (bin/dev).
  5. Load the page and shrink the browser viewport to the mobile breakpoint to show the toggle button.
  6. Click on the toggle button.
  7. See error: The drawer (#mobile-menu-drawer) slides in from the left.
  8. See error (in Dev Tools): Inspecting the drawer div shows the conflicting styles have been added by Flowbite's JS: class="... right-0 ... translate-x-full ... left-0" and style="transform: translateX(-100%);".

Expected behavior
The drawer, which is correctly configured in the HTML with right-0 and translate-x-full, should be hidden off-screen to the right. When the toggle button is clicked, it should slide into view from the right.

Screenshots
(If applicable, add screenshots to help explain your problem. You can drag and drop your images directly into the GitHub issue.)

Desktop (please complete the following information):
 - OS: macOS
 - Browser: Chrome
 - Version: Latest

Smartphone (please complete the following information):
 - Device: iPhone 14 Pro, iPad Pro (simulators and real devices)
 - OS: iOS 16+
 - Browser: Safari, Chrome
 - Version: Latest

Additional context
This is a JavaScript initialization race condition caused by Rails Turbo. Flowbite's initDrawers() script is applying its default (left-side) styles before it has correctly parsed the element's right-0 / translate-x-full classes, likely due to the turbo:load event.

We have followed the official documentation for an HTML-first, right-side drawer setup. Standard workarounds, such as adding a turbo:load event listener in application.js to manually re-run initDrawers(), did not solve the issue. This suggests a deeper conflict between Flowbite's initialization logic and the Turbo-Rails environment.

Lingua principale
HTML
Stelle
9.4k
Fork
867
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di themesberg/flowbite

Tutte le issue di themesberg/flowbite

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.