[BUG] Regression in dcc.Dropdown since 2.4.0 that clears the typed value

[sergiykhan]

Environment

dash                      2.3.1 vs 2.4.0 (or later)
dash-bootstrap-components 1.1.0
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-renderer             1.9.1
dash-table                5.0.0

• OS: Windows
• Browser Chrome
• Version 102.0.5005.115

Describe the bug

I have a Dropdown component that I use as a search field. The available options in the menu are looked up on the backend as the user types in the field. The approach is very much similar to that in the documentation.

Since version 2.4.0, dcc.Dropdown started clearing the value typed for searching on repeated searches. The bug is likely a regression due to #1970 addressing #1868.

As the user starts typing, the typed value gets cleared midway, re-triggering the search again and returning unexpected results for a partial search typed.

Screen capture showing the problem

Dash version 2.4.0

dash-2.4.0.mp4

Screen capture showing the expected behavior

Dash version 2.3.1

dash-2.3.1.mp4

Sample code

from dash import Dash, dcc, html, dcc, Input, Output
from dash.exceptions import PreventUpdate

options = [
    {"label": "aa1", "value": "aa1"},
    {"label": "aa2", "value": "aa2"},
    {"label": "aa3", "value": "aa3"},
    {"label": "best value", "value": "bb1"},
    {"label": "better value", "value": "bb2"},
    {"label": "bye", "value": "bb3"},
]

app = Dash(__name__)
app.layout = html.Div([
    html.Div([
        "Single dynamic Dropdown",
        dcc.Dropdown(id="my-dynamic-dropdown")
    ], style={'width': 200, 'marginLeft': 20, 'marginTop': 20}),
])


@app.callback(
    Output("my-dynamic-dropdown", "options"),
    Input("my-dynamic-dropdown", "search_value")
)
def update_options(search_value):
    if not search_value:
        raise PreventUpdate
    return [o for o in options if search_value in o["label"]]


if __name__ == "__main__":
    app.run_server(debug=True, port=5000)

More examples

The same behaviour is now observed on the docs page as I type Montreal and the M gets cleared.

docs.mp4