Prevent tabs from auto-refreshing when switching between them

Dash Python
1

I am following the guide here to create tabs in dash: Tabs | Dash for Python Documentation | Plotly

I have two tabs and each tab takes a set of different user inputs. However, every time I switch from let’s say, tab 1 to tab 2 and come back to tab 1, the contents of tab 1 get recreated so I lose all the original user inputs in tab 1. Is there a way to prevent this type of auto-refreshing behavior of tabs? After I return to tab 1 from tab 2, I want to be able to see what the user last inputted in tab 1.

Any help would be much appreciated!

2

Hello @ray26,

Which of the methods are you using?

If you use the second one, your selections should be kept.

Another thing you could do, is allow for persistence for the inputs.

3

Hi @jinnyzor, thanks for responding!

I am also trying to dynamically create the tabs, i.e. have a dynamic number of tabs. So I’m afraid method 2 will not work since you need to predefine the tabs in that method.

I am using persistence in my tab element but it is not working. The tabs refresh and clear all inputs as I switch between them. Here’s how I am defining the tab element:

dcc.Tabs(id='measurements-tabs', value='region-1', children=tabs, persistence=True, persistence_type='memory')

where tabs is a dynamic list of dcc.Tab elements.

4

You should still be able to use option 2, just load your dynamic tabs on the layout call of the page.

def layout():
    tabs = buildMyTabs()
    layout = dcc.Tabs(children=tabs)
    return layout

It will be dynamic upon page load, but the tabs will be static within the page.

2 Likes
5

hi @jinnyzor thanks for your help! Option 2 with your way of creating dynamic tabs solved the problem!

1 Like
6

Glad you got it working!

1 Like