Modal backdrop no longer shows in 2.3.0

[reubenfirmin]

Describe the bug
I upgrades from 2.0.0 to 2.3.0. The opaque backdrop div is no longer rendered with modals; previously it was inserted as the last child in the body (although there was a bug where several could be added).

To Reproduce
I've tried both static and dynamic modals. Static certainly adds a backdrop of some kind in that background elements are not clickable. However, the opaque layer is not shown.

I tried setting backdropClasses as an attribute, but that doesn't appear to work.

[zoltanszogyenyi]

Hey @reubenfirmin,

Please update to Tailwind CSS v3.0+. The modal backdrop is still there, but the gradient classes are now changed from the deprecated ones to the new ones: bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40.

Cheers,
Zoltan

[reubenfirmin]

@zoltanszogyenyi I do see the modal-backdrop div in your samples, but it's no longer appearing in mine. I.e. there's literally no modal-backdrop element present.

Here's my body, vs yours.

(I was on tailwind 3.3.5, upgraded to 3.4.0 now but no diff)

[zoltanszogyenyi]

Can you double-check the installation? Try clearing the cache. If it doesn't work, can you send the code over some environment so that I can reproduce it? Thanks!

[reubenfirmin]

@zoltanszogyenyi OK - did a clean build, flushed my cache, and also tried another browser.

You'll have to squint a bit, since this is kotlin, but hopefully interpretable:

class Modal(private val modalId: String, consumer: TagConsumer<*>):
    DIV(mapOf("class" to "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center " +
            "items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"), consumer) {

    fun render(block: FlowContent.() -> Unit) {
        id = modalId
        tabIndex = "-1"
        attributes["aria-hidden"] = "true"
        attributes["data-modal-backdrop"] = "static"
        div("relative p-4 w-full max-w-2xl max-h-full") {
            div("relative bg-white rounded-lg shadow dark:bg-gray-700") {
                block()
            }
        }
    }
}

... and then

                    modal("supplierModal") {
                        div {
                            id = supplierForm.id
                        }
                    }
...
                    div("flex justify-end w-full") {
                        rcpButton(SECONDARY, "Add New Supplier",
                            withNavigation(createSupplierRoute)
                                .after(withFlowbite(mapOf("data-modal-target" to "supplierModal",
                                    "data-modal-toggle" to "supplierModal"))))
                    }
                    

[reubenfirmin]

@zoltanszogyenyi Hey, since this is closed, did you lose track of it? Still an issue.

[cloudyaaron]

For some reason, I've got the same issue
I find that manually adding this to the complied CSS file fixed my problem

.inset-0{ inset: 0px; }

edit: but in my case, I do have the backdrop element its just 0x0 and not visible

[zoltanszogyenyi]

Hey everyone,

Just released v2.4.1 with an update to the modals.

Is this still happening to you alll?

If it does, feel free to re-open the issue.

Cheers,
Zotlan

[lehelikes]

Still happens to me, no backdrop at all.

FIX: I had some wrong classes on my

tag.

[stayce]

Hi @zoltanszogyenyi It still happens for me. No modal-backdrop element, same as OP. Rendering with turbo stream. Tried with CDN tags and code from example as follows. All console logs are firing. Thanks

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.turbo.min.js"></script>

import { Controller } from "@hotwired/stimulus"
import { initFlowbite } from "flowbite"
import { Modal } from 'flowbite';

export default class extends Controller {
  connect() {
    console.log('Remote modal controller connected');
    const options = {
      placement: 'center-center',
      backdrop: 'dynamic',
      backdropClasses:
          'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
      closable: true,
      onHide: () => {
          console.log('modal is hidden');
      },
      onShow: () => {
          console.log('modal is shown');
      },
      onToggle: () => {
          console.log('modal has been toggled');
      },
  };
    this.modal = new Modal(this.element, options);
    this.modal.show();
    initFlowbite();
  }

  disconnect() {
    this.modal.destroy()
  }
}

[matheusb96]

I had the same problem, what I had to do was to set the inset: 0 and opacity: 0.5 (any value) manually. I don't know if it's an error from Flowbite because, to me, it looks like the classes from Tailwind were not loading properly.

BTW I'm using the tailwindcss-rails gem.

[alec-c4]

Hey! Any update with this issue?

[benhodgson87]

The issue seems to be with Tailwind not recognising that the classes are used and shaking them out of the build.

I couldn't get the backdrop to render even on the latest version of Flowbite, but adding the classes used by the overlay to the safelist in the Tailwind config fixes the issue.

{
  safelist: ['fixed', 'bg-gray-900/50', 'dark:bg-gray-900/80', 'inset-0', 'z-30'],
}

Obviously will break again if these classes change, but solves the problem for now.

[joshiabir]

Guys, found and solved the issue. Tailwind does not add a component in css if it is not in the static files. The model adds class dynamically to the page and the css is not built because of it. So just open the inspector copy the backdrop classes paste it in a hidden div and it will auto build and work. Hope it works, worked for me!

[joshiabir]

@zoltanszogyenyi do something about it

[alec-c4]

@joshiabir you're wrong a bit. I've researched this issue and the problem is related to flowbite/plugin.js It does contain safelist mentioned earlier and because of tailwind to purge CSS of the unused classes, but something is wrong with plugin.css which contains safelist - there is an issue with backdrop. I've described this problem here #998

[Agbortoko]

I actually used the safeList method and it seems to work for me! Though if the classes are changed in future might not work again!

{
safelist: ['fixed', 'bg-gray-900/50', 'dark:bg-gray-900/80', 'inset-0', 'z-30'],
}

Just by putting the above in my tailwind.config.js the modal overlay became visible!