DateTimePicker doesn't work withDropdown while inside modal

Question

I have a large application that is written in Dash with Dash Bootstrap Components (dbc). The problem is that dbc only has datepickers not datetimepickers, so I looked to Dash Mantine Components (dmc) for help. The library has a nice DateTimePicker, but it doesn't work as expected when inside a dbc Modal.

Here's a minimal example:

from dash import Dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
dash_app = Dash(name=__name__)
dash_app.layout = dmc.MantineProvider([
 dbc.Modal(
 dmc.DateTimePicker(
 timePickerProps={
# 'withDropdown': True, 
 'popoverProps': {'withinPortal': False},
 },
 ),
 is_open=True,
 ),
])
 
if __name__ == '__main__':
 dash_app.run(debug=True, port=8080)

The problem arises when uncommenting the withDropdown line. When it's uncommented, it should open the timepicker at the bottom when a date is clicked, but it won't even open when clicked directly. Is this a bug or have I missed something?

I guess it's not considered "good practice" to combine dbc and dmc, but it's an enormous task to rewrite the entire application when I only need one component. Can it be fixed without dropping dbc?

• furas: maybe you should check in DevTools (tab Console) in Chrome/Firefox if there is no JavaScript errors. You may also use DevTools to see what CSS elements are used in HTML. Maybe they use different names and code doesn't know how to show element.
• furas: when I use withDropdown': True, then it shows it but for very short time. It seems it closes it at once. And when I click -- for hours or minutes then it looks like it open and close two times.
• furas: it works correctly if I use dmc.Modal instead of dbc.Modal

Answer 1

It appears to be caused by a focus stealing bug. You can fix this by setting enforceFocus=False to the dbc.Modal component.

enforceFocus - When True The modal will prevent focus from leaving the Modal while open.

from dash import Dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
dash_app = Dash(name=__name__)
dash_app.layout = dmc.MantineProvider([
 dbc.Modal(
 dmc.DateTimePicker(
 timePickerProps={
 'withDropdown': True,
 'popoverProps': {'withinPortal': False},
 },
 ),
 is_open=True,
 enforceFocus=False,
 ),
])
 
if __name__ == '__main__':
 dash_app.run(debug=True, port=8080)