Merge branch 'dev' into long-to-background

plotly · Jul 7, 2022 · 499e9a2 · 499e9a2
2 parents ac3cb31 + a240e2d
commit 499e9a2
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 0 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/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',
 };

diff --git a/components/dash-core-components/src/components/css/Dropdown.css b/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;
+}
diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js
@@ -29,6 +29,7 @@ const RDProps = [
  'placeholder',
  'disabled',
  'optionHeight',
+ 'maxHeight',
  'style',
  'className',
 ];

diff --git a/components/dash-core-components/tests/integration/dropdown/test_visibility.py b/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() == []