Dim background on dialog opened from drawer

[15MariamS]

When I open a dialog from an open drawer, the background is not dimmed. Presumably, this is because the drawer is also a type of dialog. How can I ensure that the background still dims?

What I expect when I open a dialog:

[ValentinaKozlova]

@15MariamS , could you please provide more details on how you use Drawer? A link on codesandbox would be helpful.

[15MariamS]

Here is a link. The background dims if the dialog is called from outside the overlay, but if it's called from within the overlay, then the background doesn't dim.

Actual (left) vs expected (right)

[khmakoto]

@15MariamS this happens indeed because we set the background of the backdrop to transparent if you have nested dialogs. Is there a reason why you need to call the Dialog inside of the OverlayDrawer? I'm asking because you basically have a work-around solution in the link you shared.

If there is a reason why you absolutely have to open the Dialog from within the OverlayDrawer, then you can customize the styles of the backdrop to the color used when you don't have nested dialogs, that is backgroundColor: 'rgba(0, 0, 0, 0.4)'. You can take a look at the solution in this modified stackblitz based on the link you shared.

[15MariamS]

Thank you so much for the help, @khmakoto!

[khmakoto]

No prob! Glad that the solution worked for you!

[15MariamS]

@khmakoto in the modified stackblitz that you linked above, the backdrop class is memoized. What happens if we don't memoize? Doesn't look like the calculation is time consuming.

Note: I do notice I get the classname incorrectly showing up in the background when I don't use useMemo... just curious why it's necessary.

[khmakoto]

It's mostly assuming you have other things that you're passing as part of the backdrop props, but I agree that it's not time consuming if it's only the styles.

I don't get the classname showing up in the background when I remove useMemo by the way. Do you have an example where that happens?