Remove hard-coded commas from selected value

Author: KoolADE85

components/dash-core-components/src/components/css/dropdown.css

@@ -70,6 +70,10 @@
     display: inline;
 }
 
+.dash-dropdown-value-item:not(:first-child)::before {
+    content: ', ';
+}
+
 .dash-dropdown-content {
     background: var(--Dash-Fill-Inverse-Strong);
     width: fit-content;

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -156,10 +156,12 @@ const Dropdown = (props: DropdownProps) => {
                 option => option.value === val
             );
             return (
-                <React.Fragment key={`${option?.value}-${i}`}>
+                <span
+                    key={`${option?.value}-${i}`}
+                    className="dash-dropdown-value-item"
+                >
                     {option && <OptionLabel {...option} index={i} />}
-                    {i === sanitizedValues.length - 1 ? '' : ', '}
-                </React.Fragment>
+                </span>
             );
         });
         return labels;

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

@@ -99,31 +99,42 @@ def send_keys(key):
     assert num_elements == 100
 
     send_keys(1)  # Expecting to be typing into the searh bar
+    sleep(0.1)  # Give time for the search to filter options
     num_elements = len(dash_duo.find_elements(".dash-dropdown-option"))
     assert num_elements == 19
 
     send_keys(Keys.ARROW_DOWN)  # Expecting to be navigating through the options
     send_keys(Keys.SPACE)  # Expecting to be selecting
-    assert dash_duo.find_element(".dash-dropdown-value").text == "1"
+    value_items = dash_duo.find_elements(".dash-dropdown-value-item")
+    assert len(value_items) == 1
+    assert value_items[0].text == "1"
 
     send_keys(Keys.ARROW_DOWN)  # Expecting to be navigating through the options
     send_keys(Keys.SPACE)  # Expecting to be selecting
-    assert dash_duo.find_element(".dash-dropdown-value").text == "1, 10"
+    value_items = dash_duo.find_elements(".dash-dropdown-value-item")
+    assert len(value_items) == 2
+    assert [item.text for item in value_items] == ["1", "10"]
 
     send_keys(Keys.SPACE)  # Expecting to be de-selecting
-    assert dash_duo.find_element(".dash-dropdown-value").text == "1"
+    value_items = dash_duo.find_elements(".dash-dropdown-value-item")
+    assert len(value_items) == 1
+    assert value_items[0].text == "1"
 
     send_keys(Keys.ARROW_UP)
     send_keys(Keys.ARROW_UP)
     send_keys(Keys.ARROW_UP)  # Expecting to wrap over to the last item
     send_keys(Keys.SPACE)
-    assert dash_duo.find_element(".dash-dropdown-value").text == "1, 91"
+    value_items = dash_duo.find_elements(".dash-dropdown-value-item")
+    assert len(value_items) == 2
+    assert [item.text for item in value_items] == ["1", "91"]
 
     send_keys(
         Keys.ESCAPE
     )  # Expecting focus to remain on the dropdown after escaping out
     sleep(0.25)
-    assert dash_duo.find_element(".dash-dropdown-value").text == "1, 91"
+    value_items = dash_duo.find_elements(".dash-dropdown-value-item")
+    assert len(value_items) == 2
+    assert [item.text for item in value_items] == ["1", "91"]
 
     assert dash_duo.get_logs() == []