Tab component being enabled via callback not applied correctly #1119
Description
Before opening:
Please fill out the below information as much as possible.
- dash version:
3.0.2 - dash-bootstrap-components version:
2.0.1 - components affected by bug:
What is happening?
When updating the disabled property of Tab components within a Tabs component via a callback, the change does not get "rendered" in the UI properly. It does get applied once the user switches to another tab, though. See the attached recording:
tab_regression.mov
What should be happening?
All tabs should be enabled after the callback ran, which runs immediately after the tabs are rendered. This works as expected in the previous version we used (1.6.0).
Code
import dash
from dash import html, dcc, Input, Output, State, callback
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
html.H1("Dash Bootstrap Tabs Example - Disabled Tab"),
html.Hr(),
dbc.Tabs(
id="tabs",
children=[
dbc.Tab(label="Tab 1", tab_id="tab-1", id="tab-1-content", children=[
html.Div([
html.H3("Content of Tab 1"),
html.P("This tab is enabled by default.")
], className="p-4")
]),
dbc.Tab(label="Tab 2", tab_id="tab-2", id="tab-2-content", children=[
html.Div([
html.H3("Content of Tab 2"),
html.P("This tab was initially enabled")
], className="p-4")
]),
dbc.Tab(label="Tab 3", tab_id="tab-3", id="tab-3-content", disabled=True, children=[
html.Div([
html.H3("Content of Tab 3"),
html.P("This tab was initially disabled but has been enabled via callback.")
], className="p-4")
]),
],
active_tab="tab-1",
),
])
@callback(
Output("tab-3-content", "disabled"),
Input("tabs", "children"),
)
def enable_tab(_):
return False
if __name__ == "__main__":
app.run(debug=True)Error messages
No error messages reported.