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")