plotly / plotly/dash

deselect all tabs in dcc tab component

Open
#3,218 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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 ?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior with the supplied Python dcc.Tabs demo, starting with value=None and clicking a selected tab. Check the Tabs component's current selection handling and existing tests; no file paths are given in the issue. Done means a selected tab can return to the no-selection state and the callback receives None.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.