<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

Attached is my react component which is conditionally rendering the

<dialog className = "pick_up_dialog"/>

<dialog className = "pick_up_dialog"/>

element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations".

Unlike

ReserveModal

ReserveModal

and

ProfileModal

ProfileModal

, which are also

<dialog/>

<dialog/>

elements, but being returned in an imported component, the

.pick_up_dialog <dialog/>

.pick_up_dialog <dialog/>

is getting conditionally rendered directly inside of the PortalHome component I've attached.

The transition animation from the

dialog{}

dialog{}

declaration and other normal CSS settings are being applied to all three dialogs. But the

dialog[open]::backdrop{}

dialog[open]::backdrop{}

settings are not being applied to the conditionally rendered

.pick_up_dialog

.pick_up_dialog

.

Is there something about conditional rendering that changed the CSS access to an element in React?

My CSS is being imported in my App.js:

import style from "./components/reserve.css";

import style from "./components/reserve.css";

When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM.

What am I not understanding?

kWQYDDjj.js9.41KB

b1mind•3/4/24, 10:47 PM

take off the [open] and see what it does

b1mind•3/4/24, 10:47 PM

dialog::backdrop {}

thethingisbackOP•3/4/24, 10:48 PM

no difference, still working on the imported compomnent dialogs but not the conditionally rendered one

thethingisbackOP•3/4/24, 10:48 PM

still workign meaning those two are getting the CSS applied while other one isn't, so nothiing's different

b1mind•3/4/24, 10:49 PM

yea not sure... I'd just blame React

b1mind•3/4/24, 10:49 PM

it makes everything harder than it needs to be.

thethingisbackOP•3/4/24, 10:50 PM

blast!

thethingisbackOP•3/4/24, 10:51 PM

well, in case anyone else answers here or you care to look, heres also my full un-factored css

C7QBHpi0.js22.79KB

Jochem•3/4/24, 10:58 PM

might help to use something like codesandbox or stackblitz so people can look at it in their browser

thethingisbackOP•3/4/24, 11:28 PM

True, I'll post tmrw

thethingisbackOP•3/5/24, 4:13 PM

Okay here's a sandbox:

https://codesandbox.io/p/sandbox/zen-shaw-qpqnt5?file=%2Fsrc%2Fstyles.css%3A11%2C1

is the useState that has to be true in order to render the dialog, which you can just manually set to true, false.

I wish I could say I perfectly replicated the issue from my react project, but the pseudo-element in this code sandbox doesn't seem to have any effect on either the conditional or normally-rendered dialogs.

Maybe we could figure out why that would be first, get it to work, then test the difference that I was talking about..

In my react project, the conditionally-rendered dialog is not receiving the CSS setting, and not showing any coloring in its "backdrop", while the other two non-conditional dialogs do reflect this CSS setting.

missymae•3/5/24, 4:32 PM

I get a 404 on your sandbox, maybe it's set to private?

thethingisbackOP•3/5/24, 6:00 PM

This may work: https://codesandbox.io/s/zen-shaw-qpqnt5?from-embed

CodeSandboxnnall

zen-shaw-qpqnt5 - CodeSandbox

zen-shaw-qpqnt5 by nnall using react, react-dom, react-scripts

MarkBoots•3/5/24, 7:20 PM

according to the docs it is recommended to use the open/close methods to show the dialog, not by toggling the open attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

this might be the reason why the ::backdrop is not showing up.
So add the dialog to the page and then call the open method on it

MDN Web Docs

: The Dialog element - HTML: HyperText Markup Language | MDN

The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

MarkBoots•3/5/24, 7:23 PM

here a discussion on a bug-report (which isn't)

https://github.com/saadeghi/daisyui/issues/2052

GitHub

bug: Dialog backdrop not working when controlled using `open` · Iss...

What version of daisyUI are you using? v3.1.6 Describe your issue Thank you for building such an awesome library! I've been working with the Modal component and controlling it's state using...