deselect all tabs in dcc tab component

[12rambau]

I'm building an application that is using the tab dcc component. This component provide the option of not selecting anything as initial value. I want to take davantage of this feature to display specific information but if I interact with the tabs I have no way to go back to a "nothing selected" state.

The following demo application is showing this exact behaviour, once I click somewhere i cannot show back the "dark" content.

import dash
from dash import dcc, html

# Initialize Dash app
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Tabs(
        id="tabs-example",
        value=None,  # No tab selected by default
        children=[
            dcc.Tab(label="Tab Alpha", value="alpha"),
            dcc.Tab(label="Tab Beta", value="beta"),
            dcc.Tab(label="Tab Gamma", value="gamma"),
        ],
    ),
    html.Div(id="tabs-content", style={"padding": "20px", "fontSize": "18px"})
])

@app.callback(
    dash.Output("tabs-content", "children"),
    dash.Output("tabs-content", "style"),
    dash.Input("tabs-example", "value"),
)
def update_content(selected_tab):
    content_styles = {"padding": "20px", "fontSize": "18px"}

    if selected_tab == "alpha":
        return html.P("Lorem ipsum dolor sit amet, consectetur adipiscing elit."), {**content_styles, "color": "red"}
    elif selected_tab == "beta":
        return html.P("Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), {**content_styles, "color": "blue"}
    elif selected_tab == "gamma":
        return html.P("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), {**content_styles, "color": "green"}
    else:
        return html.P("Nothing selected", style={"color": "black"}), content_styles

# Run app
if __name__ == "__main__":
    app.run_server(debug=True)

Can you had a way to get back to this state like clicking again on the selected one ?

[celia-lm]

Right now, the only way would be to create a callback that targets the value and sets it to None, like this:

@callback(
    Output("tabs-example", "value"),
    Input("unselect-all", "n_clicks"),
    prevent_initial_call=True
)
def reset(click):
    return None

I'd say we could rephrase this Feature Request to "dcc.Tab deselect on click"

Complete app:

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

# Initialize Dash app
app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(id="unselect-all", children="Unselect all tabs"),
    dcc.Tabs(
        id="tabs-example",
        value=None,  # No tab selected by default
        children=[
            dcc.Tab(label="Tab Alpha", value="alpha"),
            dcc.Tab(label="Tab Beta", value="beta"),
            dcc.Tab(label="Tab Gamma", value="gamma"),
        ],
    ),
    html.Div(id="tabs-content", style={"padding": "20px", "fontSize": "18px"})
])

@callback(
    Output("tabs-content", "children"),
    Output("tabs-content", "style"),
    Input("tabs-example", "value"),
)
def update_content(selected_tab):
    content_styles = {"padding": "20px", "fontSize": "18px"}

    if selected_tab == "alpha":
        return html.P("Lorem ipsum dolor sit amet, consectetur adipiscing elit."), {**content_styles, "color": "red"}
    elif selected_tab == "beta":
        return html.P("Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), {**content_styles, "color": "blue"}
    elif selected_tab == "gamma":
        return html.P("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), {**content_styles, "color": "green"}
    else:
        return html.P("Nothing selected", style={"color": "black"}), content_styles

@callback(
    Output("tabs-example", "value"),
    Input("unselect-all", "n_clicks"),
    prevent_initial_call=True
)
def reset(click):
    return None

# Run app
if __name__ == "__main__":
    app.run_server(debug=True)

[12rambau]

THanks @celia-lm for your prompt answer, it is not really solving my problem because I still need to add an extra button. I would say at this stage I can also add an extra tab and call it "default" and I avoid all the callback complexity.