Fix Dropdown comma in value. #1908

Author: T4rk1n

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

@@ -1,4 +1,4 @@
-import {isNil, pluck, omit, type, without} from 'ramda';
+import {isNil, pluck, omit, without} from 'ramda';
 import React, {useState, useCallback, useEffect, useMemo} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
@@ -21,8 +21,6 @@ const TOKENIZER = {
     },
 };
 
-const DELIMITER = ',';
-
 const Dropdown = props => {
     const {
         id,
@@ -46,11 +44,6 @@ const Dropdown = props => {
         ];
     }, [options]);
 
-    const selectedValue = useMemo(
-        () => (type(value) === 'Array' ? value.join(DELIMITER) : value),
-        [value]
-    );
-
     const onChange = useCallback(
         selectedOption => {
             if (multi) {
@@ -88,13 +81,13 @@ const Dropdown = props => {
                     setProps({value: without(invalids, value)});
                 }
             } else {
-                if (!values.includes(selectedValue)) {
+                if (!values.includes(value)) {
                     setProps({value: null});
                 }
             }
             setOptionsCheck(sanitizedOptions);
         }
-    }, [sanitizedOptions, optionsCheck, multi, value, selectedValue]);
+    }, [sanitizedOptions, optionsCheck, multi, value]);
 
     return (
         <div
@@ -108,7 +101,7 @@ const Dropdown = props => {
             <ReactDropdown
                 filterOptions={filterOptions}
                 options={sanitizeOptions(options)}
-                value={selectedValue}
+                value={value}
                 onChange={onChange}
                 onInputChange={onInputChange}
                 backspaceRemoves={clearable}

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

@@ -52,24 +52,18 @@ def update_options(search_value):
     assert dash_dcc.get_logs() == []
 
 
-def test_dddo002_array_value(dash_dcc):
-    dropdown_options = [
-        {"label": "New York City", "value": "New,York,City"},
-        {"label": "Montreal", "value": "Montreal"},
-        {"label": "San Francisco", "value": "San,Francisco"},
-    ]
-
+def test_dddo002_array_comma_value(dash_dcc):
     app = Dash(__name__)
-    arrayValue = ["San", "Francisco"]
 
     dropdown = dcc.Dropdown(
-        options=dropdown_options,
-        value=arrayValue,
+        options=["New York, NY", "Montreal, QC", "San Francisco, CA"],
+        value=["San Francisco, CA"],
+        multi=True,
     )
-    app.layout = html.Div([dropdown])
+    app.layout = html.Div(dropdown)
 
     dash_dcc.start_server(app)
 
-    dash_dcc.wait_for_text_to_equal("#react-select-2--value-item", "San Francisco")
+    dash_dcc.wait_for_text_to_equal("#react-select-2--value-0", "San Francisco, CA\n ")
 
     assert dash_dcc.get_logs() == []