[Python] DateTimePicker doesn't work withDropdown while inside modal

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?

Continue reading...