Merge pull request #2109 from AnnMarieW/dropdown-maxHeight

Dropdown max height

Author: alexcjohnson

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
 
+### Added
+- [#2109](https://github.com/plotly/dash/pull/2109) Add `maxHeight` to Dropdown options menu.
+
 ### Fixed
 - [#2102](https://github.com/plotly/dash/pull/2102) Fix bug as reported in [dash-labs #113](https://github.com/plotly/dash-labs/issues/113) where files starting with `.` were not excluded when building `dash.page_registry`.
 - [#2098](https://github.com/plotly/dash/pull/2098) Accept HTTP code 400 as well as 401 for JWT expiry

components/dash-core-components/src/components/Dropdown.react.js

@@ -142,6 +142,11 @@ Dropdown.propTypes = {
      */
     optionHeight: PropTypes.number,
 
+    /**
+     * height of the options dropdown.
+     */
+    maxHeight: PropTypes.number,
+
     /**
      * Defines CSS styles which will override styles previously set.
      */
@@ -218,6 +223,7 @@ Dropdown.defaultProps = {
     multi: false,
     searchable: true,
     optionHeight: 35,
+    maxHeight: 200,
     persisted_props: ['value'],
     persistence_type: 'local',
 };

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

@@ -1,3 +1,7 @@
 .dash-dropdown .Select-menu-outer {
     z-index: 1000;
 }
+
+.dash-dropdown .Select-menu, .Select-menu-outer {
+    max-height: none;
+}

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -29,6 +29,7 @@ const RDProps = [
     'placeholder',
     'disabled',
     'optionHeight',
+    'maxHeight',
     'style',
     'className',
 ];

components/dash-core-components/tests/integration/dropdown/test_visibility.py

@@ -45,3 +45,19 @@ def test_ddvi001_fixed_table(dash_duo):
     dash_duo.percy_snapshot("dcc.Dropdown dropdown overlaps table fixed rows/columns")
 
     assert dash_duo.get_logs() == []
+
+
+def test_ddvi002_maxHeight(dash_duo):
+    app = Dash(__name__)
+    app.layout = Div(
+        [Dropdown([str(i) for i in range(100)], "1", id="dropdown", maxHeight=800)]
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.find_element("#dropdown").click()
+    dash_duo.wait_for_element("#dropdown .Select-menu-outer")
+
+    dash_duo.percy_snapshot("dcc.Dropdown dropdown menu maxHeight 800px")
+
+    assert dash_duo.get_logs() == []