[BUG] Dash 4.0.0 dcc.DatePickerSingle not showing date in unfocused dbc.Tabs

[ColinGeukes]

First of all, thank you so much the amazing visual update on 4.0.0!
All components that were quite basic got tackled and now allow for way more convient usage!

Context

dash                       4.0.0
dash-bootstrap-components  2.0.4

• OS: macOS
• Browser Chrome
• Version 145.0.7632.45

Describe the bug

The dcc.DatePickerSingle has no visibile date if the date picker was inside a tab that was not in focus on the page load. While it works correctly if it is inside a tab that was visible on page load. (Also note that this happens while using the dbc.Tab(s)).

Also note that if you press the drop-down button, then the correct date is filled in and also focuses the calander on the correct date. So it is mostly a visual bug. As a temporary hotfix you can have a callback listening to the tab and then apply the input date to the output date, this hotfixes the problem, but is not elegant

Expected behavior

The date should be visibile in the datepicker

Reproducing code

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Tabs(
            id="tabs",
            active_tab="tab-home",
            children=[
                dbc.Tab(
                    label="Home",
                    tab_id="tab-home",
                    children=html.Div(
                        [
                            "Home is active on page load.",
                            dcc.DatePickerSingle(
                                id="working-date-picker",
                                date="2026-02-24", # This datepicker correctly shows the correct date as this tab was visible on page-load
                            ),
                        ],
                    ),
                ),
                dbc.Tab(
                    label="Date tab",
                    tab_id="tab-date",
                    children=html.Div(
                        [
                            html.Div(
                                "DatePickerSingle is in this tab (not active initially)."
                            ),
                            dcc.DatePickerSingle(
                                id="not-working-datepicker",
                                date="2026-02-24", # Datepicker has visual glitch, the selected date is not visible if switched to this tab
                            ),
                        ]
                    ),
                ),
            ],
        ),
    ],
    fluid=True,
)

if __name__ == "__main__":
    app.run(debug=True)

Thank you for the amazing work ❤️

[AnnMarieW]

@ColinGeukes
Thanks for reporting! I tried this with the dcc.Tabs and it worked correctly. Did you try that as well?

There is probably a conflict with the Bootstrap CSS. You might get a faster solution by posting this question on the dash community forum and/or opening an issue in the dash-bootstrap-components GitHub.

[ColinGeukes]

@AnnMarieW
Thank you for the quick response. Changed it to the dcc.Tab(s) and indeed now it works (and also feels a bit faster?)

Will also create the issue in the dbc GitHub, to get the underlying issue solved!

[ColinGeukes]

@AnnMarieW
I have created another reproducing code example, without dbc itself. It seems like there is a problem if the SingleDatePicker is created in a hidden component:

from dash.exceptions import PreventUpdate

app = Dash(__name__)

app.layout = html.Div(
    children=[
        dcc.Interval(
            id="one-shot",
            interval=2000,
            n_intervals=0,
            max_intervals=1,
        ),
        html.Div(
            id="hidden",
            style={"display": "none"},
            children=dcc.DatePickerSingle(
                date="2026-02-24",
            ),
        ),
    ]
)


@app.callback(Output("hidden", "style"), Input("one-shot", "n_intervals"))
def show_once(n):
    if n > 0:
        return {}
    raise PreventUpdate


if __name__ == "__main__":
    app.run(debug=True)

As you can see the date is not filled in in the date picker single via this way

[AnnMarieW]

Hi @ColinGeukes
Thanks for the great example!

Note - this is also an issue with DatePickerRange

As a workaround for now, you can add this to a .css file in the assets folder:

.dash-datepicker-input {
    width: 84px !important;
}