[BUG] Dash 3 dcc.Tab cannot be updated in a callback

[AnnMarieW]

It looks like the component is not being re-rendered when a prop in the dcc.Tab component is updated in a callback.

As reported on the forum This app works in dash 2.18.2 but not in dash 3.0.1

import dash
from dash import dcc, html, Input, Output

app = dash.Dash()

app.layout = html.Div(
    [
        html.Button("Enable Tabs", id="button", n_clicks=0),
        dcc.Store(id="store-data", data=None),
        dcc.Tabs(
            [
                dcc.Tab(label="Tab A", value="tab-a", id="tab-a", disabled=True),
                dcc.Tab(label="Tab B", value="tab-b", id="tab-b", disabled=True),
            ],
            id="tabs",
            value="tab-a",
        ),
    ]
)


@app.callback(Output("store-data", "data"), Input("button", "n_clicks"))
def update_store_data(clicks):
    if clicks > 0:
        return {"data": "available"}
    return None


@app.callback(
    Output("tab-a", "disabled"), Output("tab-b", "disabled"),
    Input("store-data", "data"),
)
def toggle_tabs(store_data):    
    if store_data is not None and "data" in store_data:       
        return False, False
    return True, True


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

[kummerer94]

This is a really annoying bug that we also noticed. It makes disabling / enabling tabs impossible. Only when you manually change the tab, is the tab really disabled.

Another example to reproduce:

from dash import Dash, Input, Output, callback, dcc, html

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        dcc.Checklist(["Yes"], ["Yes"], id="checklist"),
        dcc.Tabs(
            [
                dcc.Tab(label="Tab one", id="tab1", value="tab1", children=["FIRST"]),
                dcc.Tab(
                    label="Tab two",
                    id="tab2",
                    value="tab2",
                    children=["SECOND"],
                ),
                dcc.Tab(
                    label="Tab three",
                    id="tab3",
                    value="tab3",
                    children=["THIRD"],
                ),
            ],
            id="tabs",
        ),
    ],
)


@callback(Output("tab3", "disabled"), Input("checklist", "value"))
def render_content(value):
    print("List:", value)
    return "Yes" in value


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