Hello,
I would like to have a dropdown with dynamic options , however when I type a character, it gets remove instantly. It seems that the callback is execute once with the search_value typed, but then is executed a second time with an empty search_value, even though the only INPUT of the callback is the search_value.
opened 02:22AM - 18 Jun 22 UTC
closed 01:05PM - 28 Jun 22 UTC
# 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](https://dash.plotly.com/dash-core-components/dropdown#dynamic-options).
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
https://user-images.githubusercontent.com/25179211/174418580-0e567d7f-8c5f-4aee-8387-a17a7ec6ed0d.mp4
# Screen capture showing the expected behavior
Dash version 2.3.1
https://user-images.githubusercontent.com/25179211/174418586-effc5d7b-c7a5-4d83-a366-849febfeab78.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](https://dash.plotly.com/dash-core-components/dropdown#dynamic-options) as I type `Montreal` and the `M` gets cleared.
https://user-images.githubusercontent.com/25179211/174418682-1c2d28c4-cf32-4a11-87c6-72ec52f8d549.mp4
Although updating the Dash version didn’t help.
Thanks for your help in advance!
