Merge pull request #2104 from plotly/2099-dropdown-search

2099 dropdown search

Author: T4rk1n

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 - [#2098](https://github.com/plotly/dash/pull/2098) Accept HTTP code 400 as well as 401 for JWT expiry
 - [#2097](https://github.com/plotly/dash/pull/2097) Fix bug [#2095](https://github.com/plotly/dash/issues/2095) with TypeScript compiler and `React.FC` empty valueDeclaration error & support empty props components.
+- [#2104](https://github.com/plotly/dash/pull/2104) Fix bug [#2099](https://github.com/plotly/dash/issues/2099) with Dropdown clearing search value when a value is selected.
 
 ## [2.5.1] - 2022-06-13
 

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -37,6 +37,7 @@ const Dropdown = props => {
     const {
         id,
         clearable,
+        searchable,
         multi,
         options,
         setProps,
@@ -86,6 +87,7 @@ const Dropdown = props => {
 
     useEffect(() => {
         if (
+            !searchable &&
             !isNil(sanitizedOptions) &&
             optionsCheck !== sanitizedOptions &&
             !isNil(value)

components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py

@@ -1,3 +1,7 @@
+import time
+
+from selenium.webdriver.common.keys import Keys
+
 from dash import Dash, Input, Output, dcc, html
 from dash.exceptions import PreventUpdate
 
@@ -81,3 +85,45 @@ def test_dddo003_value_no_options(dash_dcc):
     dash_dcc.start_server(app)
     assert dash_dcc.get_logs() == []
     dash_dcc.wait_for_element("#dropdown")
+
+
+def test_dddo004_dynamic_value_search(dash_dcc):
+    # Bug clear the search input while typing
+    # https://github.com/plotly/dash/issues/2099
+
+    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="dropdown")],
+                style={"width": 200, "marginLeft": 20, "marginTop": 20},
+            ),
+        ]
+    )
+
+    @app.callback(Output("dropdown", "options"), Input("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"]]
+
+    dash_dcc.start_server(app)
+
+    input_ = dash_dcc.find_element("#dropdown input")
+
+    input_.send_keys("aa1")
+    input_.send_keys(Keys.ENTER)
+
+    input_.send_keys("b")
+
+    time.sleep(1)
+    assert input_.get_attribute("value") == "b"

components/dash-core-components/tests/integration/dropdown/test_remove_option.py

@@ -22,6 +22,7 @@ def test_ddro001_remove_option_single(dash_dcc):
             dcc.Dropdown(
                 options=dropdown_options,
                 value=value,
+                searchable=False,
                 id="dropdown",
             ),
             html.Button("Remove option", id="remove"),
@@ -61,6 +62,7 @@ def test_ddro002_remove_option_multi(dash_dcc):
                 value=value,
                 multi=True,
                 id="dropdown",
+                searchable=False,
             ),
             html.Button("Remove option", id="remove"),
             html.Div(id="value-output"),