dcc.Tab() callback triggering twice

[ssesselmann]

I have a script using six tabs tab_0 to tab_5, the program opens up correctly on the default tab0 and tabs 1,2,3,4 & 5 appear to work correctly, until I click back on tab_0 when it briefly renders tab_0 immediately followed by a random tab. repeated clicking will eventually get me to tab_0. This only happens on the first tab.

I added some print statements for debugging and it shows how tab_0 is immediately followed by another tab.

Any help appreciated.

DEBUGGING: Rendering content of tab_0 Showing tab0 .... Rendering content of tab_1 Showing tab1.... From callback on tab0; tab_1

Note: It appears this problem is happening when dcc.Interval() is active on the tab you are coming from.

---

    dcc.Tabs(id='tabs', value='tab_0', children=[
        dcc.Tab(label='My Details'      , value='tab_0'),
        dcc.Tab(label='Device & Control', value='tab_1'),
        dcc.Tab(label='2D Histogram'    , value='tab_2'), 
        dcc.Tab(label='3D Histogram'    , value='tab_3'), 
        dcc.Tab(label='Count Rate'      , value='tab_4'), 
        dcc.Tab(label='Manual & Exit'   , value='tab_5'),
        ]),

    html.Div(id = 'tab-content')]) # Empty Div for tab content

#---Tab values callback function and provide page contents

@app.callback(
    Output('tab-content'   ,'children'),
    Input('tabs'            ,'value'), prevent_initial_call=False)

def render_content(tab):

    print('Render content of ', tab)

    if tab == 'tab_0': 
        content = show_tab0()
    if tab == 'tab_1': 
        content = show_tab1()
    if tab == 'tab_2': 
        content = show_tab2()
    if tab == 'tab_3': 
        content = show_tab3()
    if tab == 'tab_4': 
        content = show_tab4()
    if tab == 'tab_5': 
        content = show_tab5()

    return content```

[ssesselmann]

Yay... 😀, three days of messing around and trying all kinds of botches, I found the problem 👍

I had used a deprecated command html.Br(' ') to insert a line of space on my problem tab0, and for some reason this caused confusion of the tabs. At first I thought it might have been a coincidence, but I changed it back and the problem was repeatable.

Replaced html.Br() with html.P() and now the tabs work as expected.

Weird and unexpected bug 🐞

[alexcjohnson]

Glad you figured this out @ssesselmann - FWIW, when I insert html.Br(" ") in either the main layout or a callback result and run in debug mode (app.run(debug=True)), I see this error displayed in the browser:

br is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.