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