Tab change carries over input values


#1

I have two tabs. I have an input (type number) on each one. I have no Callbacks.

When I put a number in one of the inputs it carries over to the other input. A heavily simplified piece of the code is below:

import dash_html_components as html
import dash_core_components as dcc
import dash


app = dash.Dash()

app.scripts.config.serve_locally = True
app.layout = html.Div([
    dcc.Tabs(
        children = [
            dcc.Tab(
                children = [
                    dcc.Input(
                        id = "input_1",
                        type = "number",
                        min = 0,
                    ),
                ],
                label = "thing_1",
            ),
            dcc.Tab(
                children = [
                    dcc.Input(
                        id = "input_2",
                        type = "number",
                        min = 0,
                    ),
                ],
                label = "thing_2",
            ),
        ]
    ),
])

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

Running this one should see that inputting a number into input (id = "input_1) on tab thing_1 will also fill in input (id = "input_2) on tab thing_2.

Due to my lack of knowledge on the inner workings of Dash I’m not quite sure what I need to do to fix this.

It would be great if someone could offer some assistance.
Many Thanks


#2

I have been able to create a work around. Same code but with work around:

import dash_html_components as html
import dash_core_components as dcc
import dash


app = dash.Dash()

app.scripts.config.serve_locally = True
app.layout = html.Div([
    dcc.Tabs(
        children = [
            dcc.Tab(
                children = [
                    html.Div([],style = {"display":"none"}),
                    dcc.Input(
                        id = "input_1",
                        type = "number",
                        min = 0,
                        value = 80
                    ),
                ],
                label = "thing_1",
            ),
            dcc.Tab(
                children = [
                    dcc.Input(
                        id = "input_2",
                        type = "number",
                        min = 0,
                        value = 90
                    ),
                ],
                label = "thing_2",
            ),
        ]
    ),
])

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

The difference is that the first input contains a blank Div.

It seems the issue is caused when the two tabs have divs that “reflect” each other in some way. If for example one adds a label in one of the tabs in the first example the error no longer persits. However in my real example it is normal for the 2 tabs to look the same (so changing it in this way will not work). By adding a blank Div it looks exactly the same however it no longer has the exact same layout.

However this does not explain why the issue was happening in the first place or how to “properly” solve it.


#3

@OliverBrace Can you confirm what version of the dash packages you are using? The renderer has recently been updated to solve these kinds of issues. Maybe we’ve missed some. Thanks.


#4

Hi. The dash version I’m using is probably an old one:

dash==0.28.7
dash-core-components==0.37.0
dash-html-components==0.13.2
dash-renderer==0.14.3
dash-table==3.1.2
dash-table-experiments==0.6.0

I’ll update and see if the problem goes away.