Sometimes don't update an Output element in a callback

Dash Python
1

I am using a multiselect dropdown component but I want to limit the max number of values selected at any time (e.g., 3). But, I can’t disable the dropdown once 3 are chosen, because I want the user to still be able to remove selections and add new ones whenever it’s under 3.

I wanted to have a callback triggered by the dropdown value which outputs to a table with data corresponding to each selected value and also outputs to the dropdown value to alter the values if more than 3 are selected.

app.callback([Output(‘table’, ‘data’), Output(‘dropdown’, ‘value’)], [Input(‘dropdown’, ‘value’)])

But, it seems I cannot have the same component be an input and an output?

If the dropdown values Input is <= 3 I want to update the table with a bunch of data for the values and not alter the dropdown value.

But if the dropdown value is > 3 elements, I want to reset the dropdown value to the first 3 and not update the table.

So, in this callback, sometimes I want to change the Output table object and not the dropdown value and sometimes the reverse (change the dropdown value but not change the table).

As far as the table, I know that I can pass the table’s data as State and when I don’t want to update the table just pass that state value back as the table output. But this seems like a lot of data transfer for no reason (the table can be very large for 3 values selected in the dropdown).

As far as the dropdown value, I’m not sure how I can limit it to 3 choices without disabling the dropdown (which doesn’t work for me) - it seems I can’t have the dropdown value as an Input and Output in the same callback?

Is there a way to sometimes not modify an Output object in a callback without passing it’s state back to it?

Is there a way to pass the dropdown value as an Input and an Output to a callback?

2

Yes, you can return dash.no_update. See examples in Advanced Callbacks | Dash for Python Documentation | Plotly

2 Likes
3

Thanks for the response!

I made kind of a large edit to my question because I seem to be unable to pass the dropdown value both as Input and change it as Output.

Is there a way to achieve my limit dropdown to 3 logic?

4

Sorry, just realized a slightly different version of my “sometimes don’t update an Output.”

What if I want to add data to an output object (e.g., columns to a table) - do I have to pass in the table data as State, add the data in the callback, and pass back the updated table with all the data (new and old)? Or is there a way to just pass back the “new” data and reduce transferring all the old data from the server to the client?

5

Not yet, but we’re exploring that idea in [Feature Request] Array operation callbacks · Issue #968 · plotly/dash · GitHub

6

Thank you for this nugget of knowledge! This allowed me to combine two callbacks into a single function for a smoother user experience! Without the dash.no-update it would not have been possible. Thanks!