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?