Black Lives Matter. Please consider donating to Black Girls Code today.

How to update multiple properties of the same Output in Dash?

I have a dropdown menu, where the options are the names of currently loaded datasets. The default value of the dropdown is the name of the first dataset in the list.

I can write a callback function to get new datasets, and update the options of the dropdown menu. But now, the dropdown menu’s value is no longer set.

Since Dash only lets you update one Output property per callback function, I cannot simultaneously update both the dropdown menu’s options, AND its selected value. Further, if I try to have a second callback function that updates its value, errors occur because it ends up updating the value to the name of a dataset that no longer exists (thanks to the first callback function).

How do you update multiple properties of an Output at the same time?

You can update children property of the parent div and recreate the dropdown completely. If the id of the new dropdown is the same as old one - callbacks that take it as an input should still work.

2 Likes

That works perfectly, thanks!

1 Like

Hi @Vlad , I tried to update a date-range-picker using the method you mentioned. However the newly created date-picker won’t replace the original picker(serves as a place holder and show id). It works if I don’t pre-define a date-picker. Am I doing something wrong? Thanks!

@DongyaoLi - Can you create a small reproducable example?

Hi @chriddyp , I figured out that the problem is very specific: I cannot update the “max_date_allowed” attribute in the dcc.date-range-picker by replacing it with a new component. It’s weird. I have send you an example through email. Thanks!

1 Like