diff --git a/components/dash-core-components/src/components/css/dropdown.css b/components/dash-core-components/src/components/css/dropdown.css
index 7746c49a75..a10cfbbf1f 100644
--- a/components/dash-core-components/src/components/css/dropdown.css
+++ b/components/dash-core-components/src/components/css/dropdown.css
@@ -4,7 +4,7 @@
box-sizing: border-box;
margin: calc(var(--Dash-Spacing) * 2) 0;
padding: 0;
- background: inherit;
+ background: var(--Dash-Fill-Inverse-Strong);
border: none;
outline: none;
width: 100%;
@@ -46,7 +46,7 @@
}
.dash-dropdown:focus {
- outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+ border: 1px solid var(--Dash-Fill-Interactive-Strong);
}
.dash-dropdown:disabled {
@@ -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/components/css/input.css b/components/dash-core-components/src/components/css/input.css
index 6ca5d898fe..667321994b 100644
--- a/components/dash-core-components/src/components/css/input.css
+++ b/components/dash-core-components/src/components/css/input.css
@@ -16,7 +16,7 @@
}
.dash-input-container:focus-within {
- outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+ border: 1px solid var(--Dash-Fill-Interactive-Strong);
}
.dash-input-container:has(.dash-input-element:disabled) {
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")