Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Trying to optimize my dropdown input by limit maximum number of values

Trying to limit the amount of input’s users can enter in my multi dcc.Dropdown. My OPTIONS are saved and loaded as soon as users enter the dashboard. I’m also trying to lower the amount of @callbacks required for this operation.

Here is my code, in this case let’s say I want to limit my dropdown to 5 maximum values. This code works to an extent… but not able to prevent the user from adding additional values into the dropdown. The HTML warning also doesn’t pop-up.

@app.callback(
    dash.dependencies.Output("dynamic-dropdown", "options"),
    [dash.dependencies.Input("dynamic-dropdown", "search_value")],
    [dash.dependencies.State("dynamic-dropdown", "value")],
)
def update_multi_options(search_value, value):
    if not search_value:
        raise PreventUpdate
    elif len(search_value) >= 5:
        children = html.P("You have entered the limit", id='input-warning')
        return [
              children,
              [option
              for option in OPTIONS
              if option["value"] in search_value]
              ]


    else:
        return [
            o for o in OPTIONS if search_value in o["label"] or o["value"] in (value or [])
        ]

Would greatly appreciate some guidance here.