some refinements

Author: KoolADE85

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

@@ -23,7 +23,7 @@ export default function Dropdown({
     optionHeight = 36,
     // eslint-disable-next-line no-magic-numbers
     maxHeight = 200,
-    closeOnSelect = true,
+    closeOnSelect = !multi,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     persisted_props = [PersistedProps.value],
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -1,4 +1,5 @@
 .dash-dropdown {
+    box-sizing: border-box;
     margin: calc(var(--Dash-Spacing) * 2) 0;
 }
 
@@ -30,7 +31,8 @@
     background: inherit;
     padding: 6px 12px;
     width: 100%;
-    height: 32px;
+    min-height: 32px;
+    height: 100%;
     cursor: pointer;
     font-size: inherit;
     overflow: hidden;
@@ -69,6 +71,7 @@
 .dash-dropdown-value-count,
 .dash-dropdown-trigger-icon {
     color: var(--Dash-Text-Strong);
+    fill: var(--Dash-Text-Strong);
     white-space: nowrap;
     justify-self: end;
 }

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

@@ -468,6 +468,8 @@ const Dropdown = (props: DropdownProps) => {
                                     e.preventDefault();
                                     handleClear();
                                 }}
+                                title="Clear selection"
+                                aria-label="Clear selection"
                             >
                                 <Cross1Icon />
                             </a>