How to fix dmc DateTimePicker dropdown in a dbc Modal: turn off enforceFocus (Dash + Bootstrap + Mantine)

Fix dmc DateTimePicker time dropdown not opening inside a dbc Modal in Dash: disable enforceFocus on the Bootstrap modal; keep withinPortal=False for stability.

Embedding a dmc DateTimePicker inside a dbc Modal looks straightforward until you enable the time dropdown. The picker renders, but the time selector refuses to open, or flashes and closes immediately. Rewriting a large Dash app away from Bootstrap components just to gain DateTimePicker support is rarely feasible, so a minimal, reliable fix matters.

Reproducing the issue

The behavior shows up when you place DateTimePicker inside a dbc Modal and switch on time dropdown mode. With the dropdown disabled, the component works. Enabling it causes the expected time panel to never open or to blink briefly and dismiss.

from dash import Dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

web_app = Dash(name=__name__)

web_app.layout = dmc.MantineProvider([
    dbc.Modal(
        dmc.DateTimePicker(
            timePickerProps={
#               'withDropdown': True,
                'popoverProps': {'withinPortal': False},
            },
        ),
        is_open=True,
    ),
])
 
if __name__ == '__main__':
    web_app.run(debug=True, port=8080)

Switching on the time dropdown is as simple as uncommenting withDropdown. That is enough to trigger the issue when the picker lives in a dbc Modal.

What’s really happening

The root cause is a focus stealing bug. The modal keeps focus inside itself so aggressively that the picker’s dropdown cannot hold it, so the time panel immediately collapses upon opening. The effect is visible as a quick flash or double open-close when interacting with hour and minute controls.

Notably, the same picker behaves correctly when wrapped in a dmc.Modal. That contrast points back to modal-level focus handling rather than the picker’s internal logic.

The fix

Disable focus enforcement on the Bootstrap modal. That prevents the modal from reclaiming focus from the DateTimePicker’s dropdown, allowing the time panel to stay open and be interactive.

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

web_app = Dash(name=__name__)

web_app.layout = dmc.MantineProvider([
    dbc.Modal(
        dmc.DateTimePicker(
            timePickerProps={
                'withDropdown': True,
                'popoverProps': {'withinPortal': False},
            },
        ),
        is_open=True,
        enforceFocus=False,
    ),
])
 
if __name__ == '__main__':
    web_app.run(debug=True, port=8080)

After this change, the time dropdown opens and stays open as expected when a date is selected or when the time area is clicked directly.

Why this matters

Large Dash applications often mix component libraries to cover feature gaps, such as datetime picking. When two ecosystems meet, default behaviors like modal focus trapping can collide with interactive elements like popovers and dropdowns. Knowing how to relax modal focus rules avoids unnecessary rewrites and lets you adopt the component you need with minimal surface area changes.

If you still see odd behavior, it’s worth checking DevTools to confirm there are no JavaScript errors and to verify how the relevant HTML and CSS elements are toggled when opening the dropdown.

Takeaways

When a dmc DateTimePicker’s time dropdown refuses to open inside a dbc Modal, the culprit is focus enforcement. Turn off focus trapping on the modal using enforceFocus=False, keep the existing Mantine popover setting withinPortal=False, and the control behaves normally. This small configuration shift restores expected UX without replacing your modal framework or refactoring the broader app.