Fix plotly#2653: unexpected behaviour of Dropdown

dcc.Dropdown has inconsistent layout flow
compared to other common input components.
The layout bug is normalised with CSS style
display set to inline-block.

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
 import dropdown from '../utils/LazyLoader/dropdown';
+import './css/Dropdown.css';
 
 const RealDropdown = lazy(dropdown);
 
@@ -14,11 +15,36 @@ const RealDropdown = lazy(dropdown);
  * constrained for space. Otherwise, you can use RadioItems or a Checklist,
  * which have the benefit of showing the users all of the items at once.
  */
-export default class Dropdown extends Component {
+ export default class Dropdown extends Component {
  render() {
+ const { style, className, ...props } = this.props;
  return (
  <Suspense fallback={null}>
- <RealDropdown {...this.props} />
+ <RealDropdown
+ {...props}
+ className={`dash-dropdown ${className || ''}`}
+ styles={{
+ control: (provided) => ({
+ ...provided,
+ display: 'inline-block',
+ verticalAlign: 'middle',
+ width: style?.width || '300px', // Default width
+ }),
+ menu: (provided) => ({
+ ...provided,
+ maxHeight: 'none',
+ display: 'inline-block',
+ width: style?.width || '300px', // Default width
+ verticalAlign: 'middle',
+ }),
+ menuOuter: (provided) => ({
+ ...provided,
+ maxHeight: 'none',
+ zIndex: 1000,
+ width: style?.width || '300px', // Default width
+ }),
+ }}
+ />
  </Suspense>
  );
  }

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

@@ -1,8 +1,20 @@
-.dash-dropdown .Select-menu-outer {
- z-index: 1000;
- max-height: none;
+.dash-dropdown .Select-control {
+ display: inline-block;
+ width: 300px;
+ vertical-align: middle;
+ margin-left: 785px;
 }
 
 .dash-dropdown .Select-menu {
  max-height: none;
+ display: inline-block;
+ width: 300px;
+ vertical-align: middle;
+}
+
+.dash-dropdown .Select-menu-outer {
+ z-index: 1000;
+ max-height: none;
+ width: 300px;
+ margin-left: 785px;
 }