Bugfix: address dcc dropdown feedback

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;
@@ -434,7 +436,9 @@ const Dropdown = (props: DropdownProps) => {
                     onOpenAutoFocus={e => e.preventDefault()}
                     onKeyDown={handleKeyDown}
                     style={{
-                        maxHeight: maxHeight ? `${maxHeight}px` : 'auto',
+                        maxHeight: maxHeight
+                            ? `min(${maxHeight}px, calc(100vh - 100px))`
+                            : 'calc(100vh - 100px)',
                     }}
                 >
                     {searchable && (

components/dash-core-components/src/utils/optionRendering.tsx

@@ -92,21 +92,28 @@ export const Option: React.FC<OptionProps> = ({
             aria-selected={isSelected}
             style={optionStyle}
         >
-            <input
-                type={inputType}
-                checked={isSelected}
-                name={id}
-                value={
-                    typeof option.value === 'boolean'
-                        ? `${option.value}`
-                        : option.value
-                }
-                disabled={!!option.disabled}
-                onChange={() => onChange(option)}
-                readOnly
-                className={inputClassNames.join(' ')}
-                style={inputStyle}
-            />
+            <span className="dash-options-list-option-wrapper">
+                <input
+                    type={inputType}
+                    checked={isSelected}
+                    name={id}
+                    value={
+                        typeof option.value === 'boolean'
+                            ? `${option.value}`
+                            : option.value
+                    }
+                    disabled={!!option.disabled}
+                    onChange={() => onChange(option)}
+                    onKeyUp={e => {
+                        if (e.key === 'Enter' && inputType === 'checkbox') {
+                            onChange(option);
+                        }
+                    }}
+                    readOnly
+                    className={inputClassNames.join(' ')}
+                    style={inputStyle}
+                />
+            </span>
             <span
                 className={labelClassNames.join(' ')}
                 style={labelStyle}

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() == []
 

components/dash-core-components/tests/integration/test_title_props.py

@@ -52,8 +52,8 @@ def add_title_to_option(title):
     dash_dcc.start_server(app)
 
     elements = [
-        dash_dcc.wait_for_element("#dropdown_1 .dash-dropdown-value span"),
-        dash_dcc.wait_for_element("#dropdown_2 .dash-dropdown-value span"),
+        dash_dcc.wait_for_element("#dropdown_1 .dash-dropdown-value-item span"),
+        dash_dcc.wait_for_element("#dropdown_2 .dash-dropdown-value-item span"),
         dash_dcc.wait_for_element("#checklist_1 .Select-value-label"),
         dash_dcc.wait_for_element("#radioitems_1 .Select-value-label"),
     ]

tests/integration/renderer/test_children_reorder.py

@@ -66,17 +66,16 @@ def swap_button_action(n_clicks, children):
         dash_duo.find_element(".dash-dropdown-option:nth-child(1)").click()
         dash_duo.wait_for_text_to_equal(f".dropdown_{i} .dash-dropdown-trigger", "A")
         dash_duo.find_element(".dash-dropdown-option:nth-child(2)").click()
-        dash_duo.wait_for_text_to_equal(
-            f".dropdown_{i} .dash-dropdown-trigger", "A, B\n2 selected"
-        )
+        value_items = dash_duo.find_elements(f".dropdown_{i} .dash-dropdown-value-item")
+        assert [item.text for item in value_items] == ["A", "B"]
         dash_duo.find_element(".dash-dropdown-option:nth-child(3)").click()
-        dash_duo.wait_for_text_to_equal(
-            f".dropdown_{i} .dash-dropdown-trigger", "A, B, C\n3 selected"
-        )
+        value_items = dash_duo.find_elements(f".dropdown_{i} .dash-dropdown-value-item")
+        assert [item.text for item in value_items] == ["A", "B", "C"]
+
         dash_duo.find_element(f".swap_button_{i}").click()
-    dash_duo.wait_for_text_to_equal(
-        f".dropdown_{0} .dash-dropdown-trigger", "A, B, C\n3 selected"
-    )
-    dash_duo.wait_for_text_to_equal(
-        f".dropdown_{1} .dash-dropdown-trigger", "A, B, C\n3 selected"
-    )
+
+    value_items = dash_duo.find_elements(f".dropdown_{0} .dash-dropdown-value-item")
+    assert [item.text for item in value_items] == ["A", "B", "C"]
+
+    value_items = dash_duo.find_elements(f".dropdown_{1} .dash-dropdown-value-item")
+    assert [item.text for item in value_items] == ["A", "B", "C"]

tests/integration/renderer/test_component_as_prop.py

@@ -393,13 +393,13 @@ def opts(n):
 
     dash_duo.wait_for_text_to_equal("#counter", "0")
     dash_duo.find_element("#a").click()
-    assert len(dash_duo.find_elements("#b label > input")) == 2
+    assert len(dash_duo.find_elements("#b label input")) == 2
     dash_duo.wait_for_text_to_equal("#counter", "0")
     dash_duo.find_element("#a").click()
-    assert len(dash_duo.find_elements("#b label > input")) == 3
+    assert len(dash_duo.find_elements("#b label input")) == 3
     dash_duo.wait_for_text_to_equal("#counter", "0")
 
-    dash_duo.find_elements("#b label > input")[0].click()
+    dash_duo.find_elements("#b label input")[0].click()
     dash_duo.wait_for_text_to_equal("#counter", "1")