remove state and use search_value instead. add test for multiple dropdowns

Author: TillerBurr

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

@@ -42,12 +42,12 @@ const Dropdown = props => {
         multi,
         options,
         setProps,
+        search_value,
         style,
         loading_state,
         value,
     } = props;
     const [optionsCheck, setOptionsCheck] = useState(null);
-    const [searchValue, setSearchValue] = useState(null);
     const persistentOptions = useRef(null);
 
     if (!persistentOptions || !isEqual(options, persistentOptions.current)) {
@@ -115,14 +115,14 @@ const Dropdown = props => {
         [multi]
     );
 
-    const onInputChange = useCallback(search_value => {
-        setProps({search_value});
-        setSearchValue(search_value);
-    }, []);
+    const onInputChange = useCallback(
+        search_value => setProps({search_value}),
+        []
+    );
 
     useEffect(() => {
         if (
-            !searchValue &&
+            !search_value &&
             !isNil(sanitizedOptions) &&
             optionsCheck !== sanitizedOptions &&
             !isNil(value)

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

@@ -2,7 +2,7 @@
 
 import pytest
 
-from dash import Dash, html, dcc, Output, Input
+from dash import Dash, html, dcc, Output, Input, State
 from dash.exceptions import PreventUpdate
 
 
@@ -88,3 +88,64 @@ def on_change(val):
     btn.click()
 
     dash_dcc.wait_for_text_to_equal("#value-output", '["MTL"]')
+
+
+def test_ddro003_remove_option_multiple_dropdowns(dash_dcc):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="available-options",
+                multi=True,
+                options=sample_dropdown_options,
+                value=["MTL", "NYC", "SF"],
+            ),
+            dcc.Dropdown(
+                id="chosen",
+                multi=True,
+                options=sample_dropdown_options,
+                value=["NYC", "SF"],
+            ),
+            html.Button(id="remove-btn", children="Remove"),
+            html.Button(id="submit-btn", children="Submit"),
+            html.Div(id="value-output"),
+            html.Div(id="options-output"),
+        ],
+    )
+
+    @app.callback(
+        Output("chosen", "options"),
+        Input("available-options", "value"),
+    )
+    def update_options(available_options):
+        if available_options is None:
+            return []
+        else:
+            return [{"label": i, "value": i} for i in available_options]
+
+    @app.callback(
+        Output("available-options", "options"), [Input("remove-btn", "n_clicks")]
+    )
+    def on_click(n_clicks):
+        if not n_clicks:
+            raise PreventUpdate
+        return sample_dropdown_options[:-1]
+
+    @app.callback(
+        [Output("value-output", "children"), Output("options-output", "children")],
+        Input("submit-btn", "n_clicks"),
+        State("chosen", "options"),
+        State("chosen", "value"),
+    )
+    def print_value(n_clicks, options, value):
+        if not n_clicks:
+            raise PreventUpdate
+        return [json.dumps(value), json.dumps([i["value"] for i in options])]
+
+    dash_dcc.start_server(app)
+    btn = dash_dcc.wait_for_element("#remove-btn")
+    btn.click()
+    btn = dash_dcc.wait_for_element("#submit-btn")
+    btn.click()
+    dash_dcc.wait_for_text_to_equal("#value-output", '["NYC"]')
+    dash_dcc.wait_for_text_to_equal("#options-output", '["MTL", "NYC"]')