Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash dcc.Graph doesn't change className when updated through callback from changing Tab

Hello. I met this problem. I create a simple example.

from dash import dash
import plotly.io as pio
from dash import dcc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from dash import html
import dash_bootstrap_components as dbc

TEMPLATE_NAME = "plotly_dark"
pio.templates.default = "plotly_dark"
pio.templates[pio.templates.default].layout.plot_bgcolor = '#171921'
pio.templates[pio.templates.default].layout.paper_bgcolor = '#171921'

app = dash.Dash(
    __name__, external_stylesheets=[dbc.themes.LUMEN],
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
    title="test"
)
app.config["suppress_callback_exceptions"] = True


def create_app_layout():
    return html.Div(
        className="app-layout",
        children=[
            dcc.Tabs(id='view-tab', className='app-custom-tabs tabs',
                     value='a',
                     children=[
                         dcc.Tab(label='A', className='app-custom-tab tab',
                                 selected_className='app-custom-tab--selected', value='a'),
                         dcc.Tab(label='B', className='app-custom-tab tab',
                                 selected_className='app-custom-tab--selected', value='b')
                     ]),
            html.Div(id='view', className='view-container')
        ])


@app.callback([
    Output('view', 'children')

],
    Input('view-tab', 'value'),
)
def _prepare_data(view):
    if view == 'a':
        figure = go.Figure()
        figure.add_trace(go.Pie(values=[0, 1, 2, 3, 4], labels=['a', 'b', 'c', 'd', 'e']))
        graphs = [dcc.Graph(className='w45', figure=figure)]
        return [html.Div(className='plots-container',
                         children=graphs)]
    if view == 'b':
        figure = go.Figure()
        figure.add_trace(go.Pie(values=[10, 0.5, 5, 12, 4], labels=['aa', 'bb', 'cc', 'dd', 'ee']))
        graphs = [dcc.Graph(className='w100', figure=figure)]
        return [html.Div(className='plots-container',
                         children=graphs)]
    return


app.layout = html.Div()

if __name__ == "__main__":
    app.layout = create_app_layout()
    app.run_server(debug=True, host='0.0.0.0', port=8050, dev_tools_hot_reload=False, use_reloader=False)

I just create two Tabs and change view-div children when changing tab. As you can see, a and b graphs have a different classnames(w45 for a, and w100 for b), but when i change tab classname of b graph doesn’t change, it’s still remains like the first tab.
A tab


B tab

What interested that content of Pie chart was updated, but classname of his parent are not. I don’t know why it work in this way because I update whole array of children instead specific dcc.Graph figure. I don’t know what i’m doing wrong.

I open React Dev Tools and saw that prop className was changed.
A tab


B tab

If I add to b-graph a id-field the problem disappeared but only for graph with id.

i think it means that problem may be with renderer, maybe some sort of things like cache or something similar.

I will be glad if you can help me. Thanks.