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?

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)