From a5eef680618ccd03b25a4016a7e918b935bd685d Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 15 Mar 2022 13:45:04 -0400
Subject: [PATCH] Fix Dropdown comma in value. #1908

---
 .../src/fragments/Dropdown.react.js            | 15 ++++-----------
 .../dropdown/test_dynamic_options.py           | 18 ++++++------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js
index 1f41d61cd7..599610dfc1 100644
--- a/components/dash-core-components/src/fragments/Dropdown.react.js
+++ b/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}
diff --git a/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py b/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py
index c16c3f39eb..cd15bd709b 100644
--- a/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py
+++ b/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() == []