Merge pull request #3656 from plotly/bugfix/3616

dcc.Dropdown: Use virtualized lists for large collections of options

Author: KoolADE85

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Fixed
 - [#3629](https://github.com/plotly/dash/pull/3629) Fix date pickers not showing date when initially rendered in a hidden container.
 - [#3627][(](https://github.com/plotly/dash/pull/3627)) Make dropdowns searchable wheen focused, without requiring to open them first
+- [#3656][(](https://github.com/plotly/dash/pull/3656)) Improved dropdown performance for large collections of options
 - [#3660][(](https://github.com/plotly/dash/pull/3660)) Allow same date to be selected for both start and end in DatePickerRange components
 
 

components/dash-core-components/package-lock.json

@@ -47,12 +47,12 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "base64-js": "^1.5.1",
     "d3-format": "^1.4.5",
+    "date-fns": "^4.1.0",
     "fast-isnumeric": "^1.1.4",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.8.0",
     "js-search": "^2.0.1",
     "mathjax": "^3.2.2",
-    "date-fns": "^4.1.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prop-types": "^15.8.1",
     "ramda": "^0.30.1",
@@ -62,7 +62,7 @@
     "react-fast-compare": "^3.2.2",
     "react-input-autosize": "^3.0.0",
     "react-markdown": "^4.3.1",
-    "react-virtualized-select": "^3.1.3",
+    "react-window": "^1.8.11",
     "remark-math": "^3.0.1",
     "uniqid": "^5.4.0"
   },
@@ -86,6 +86,7 @@
     "@types/react": "^16.14.8",
     "@types/react-dom": "^16.9.13",
     "@types/react-input-autosize": "^2.2.4",
+    "@types/react-window": "^1.8.8",
     "@types/uniqid": "^5.3.4",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",

components/dash-core-components/package.json

@@ -30,7 +30,7 @@ export default function Checklist({
     inline = false,
 }: ChecklistProps) {
     const sanitizedOptions = useMemo(() => {
-        return sanitizeOptions(options);
+        return sanitizeOptions(options).options;
     }, [options]);
 
     const stylingProps = {

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

@@ -31,7 +31,7 @@ export default function RadioItems({
     inline = false,
 }: RadioItemsProps) {
     const sanitizedOptions = useMemo(() => {
-        return sanitizeOptions(options);
+        return sanitizeOptions(options).options;
     }, [options]);
 
     const stylingProps = {

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

@@ -218,6 +218,18 @@
     overflow-y: auto;
 }
 
+.dash-dropdown-content:has(.dash-options-list-virtualized) {
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.dash-dropdown-options:has(.dash-options-list-virtualized) {
+    overflow-y: visible;
+    flex: 1;
+    min-height: 0;
+}
+
 .dash-dropdown-option {
     padding: calc(var(--Dash-Spacing) * 2) calc(var(--Dash-Spacing) * 3);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;