diff --git a/components/dash-core-components/src/components/css/dropdown.css b/components/dash-core-components/src/components/css/dropdown.css
index 7746c49a75..4e9b7b13e1 100644
--- a/components/dash-core-components/src/components/css/dropdown.css
+++ b/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;
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
index 6808ff7a84..88666713e2 100644
--- a/components/dash-core-components/src/fragments/Dropdown.tsx
+++ b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -156,10 +156,12 @@ const Dropdown = (props: DropdownProps) => {
option => option.value === val
);
return (
-
+
{option && }
- {i === sanitizedValues.length - 1 ? '' : ', '}
-
+
);
});
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 && (
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
index 10b62cec84..40ffcacfc7 100644
--- a/components/dash-core-components/src/utils/optionRendering.tsx
+++ b/components/dash-core-components/src/utils/optionRendering.tsx
@@ -92,21 +92,28 @@ export const Option: React.FC = ({
aria-selected={isSelected}
style={optionStyle}
>
- onChange(option)}
- readOnly
- className={inputClassNames.join(' ')}
- style={inputStyle}
- />
+
+ onChange(option)}
+ onKeyUp={e => {
+ if (e.key === 'Enter' && inputType === 'checkbox') {
+ onChange(option);
+ }
+ }}
+ readOnly
+ className={inputClassNames.join(' ')}
+ style={inputStyle}
+ />
+
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")