Update EuiComboBox to match options list width to the input width.

elastic · Apr 1, 2018 · d6aecde · d6aecde
1 parent 75e4995
commit d6aecde
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,18 +1,20 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.37`.
+**Bug fixes**
+
+- Fixed `EuiComboBox` bug in which the options list wouldn't always match the width of the input ([#611](https://github.com/elastic/eui/pull/611))
 
 # [`0.0.37`](https://github.com/elastic/eui/tree/v0.0.37)
 
-- Added `EuiComboBox` for selecting many options from a list of options ([567](https://github.com/elastic/eui/pull/567))
-- Added `EuiHighlight` for highlighting a substring within text ([567](https://github.com/elastic/eui/pull/567))
-- `calculatePopoverPosition` service now accepts a `positions` argument so you can specify which positions are acceptable ([567](https://github.com/elastic/eui/pull/567))
-- Added `closeButtonProps` prop to `EuiBadge`, `hollow` badge type, and support for arbitrary hex color ([567](https://github.com/elastic/eui/pull/567))
-- Added support for arbitrary hex color to `EuiIcon` ([567](https://github.com/elastic/eui/pull/567))
+- Added `EuiComboBox` for selecting many options from a list of options ([#567](https://github.com/elastic/eui/pull/567))
+- Added `EuiHighlight` for highlighting a substring within text ([#567](https://github.com/elastic/eui/pull/567))
+- `calculatePopoverPosition` service now accepts a `positions` argument so you can specify which positions are acceptable ([#567](https://github.com/elastic/eui/pull/567))
+- Added `closeButtonProps` prop to `EuiBadge`, `hollow` badge type, and support for arbitrary hex color ([#567](https://github.com/elastic/eui/pull/567))
+- Added support for arbitrary hex color to `EuiIcon` ([#567](https://github.com/elastic/eui/pull/567))
 
 **Breaking changes**
 
-- Renamed `euiBody-hasToolTip` class to `euiBody-hasPortalContent` ([567](https://github.com/elastic/eui/pull/567))
+- Renamed `euiBody-hasToolTip` class to `euiBody-hasPortalContent` ([#567](https://github.com/elastic/eui/pull/567))
 
 # [`0.0.36`](https://github.com/elastic/eui/tree/v0.0.36)
 

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -55,7 +55,6 @@ export class EuiComboBox extends Component {
       searchValue: initialSearchValue,
       isListOpen: false,
       listPosition: 'bottom',
-      listStyles: {},
     };
 
     // Cached derived state.
@@ -100,19 +99,29 @@ export class EuiComboBox extends Component {
       return;
     }
 
-    // Cache for future calls.
-    this.listBounds = listBounds;
     const comboBoxBounds = this.comboBox.getBoundingClientRect();
-    const { position, left, top } = calculatePopoverPosition(comboBoxBounds, listBounds, 'bottom', 0, ['bottom', 'top']);
 
-    const listStyles = {
-      top: top + window.scrollY,
-      left,
+    // Cache for future calls. Assign values directly instead of destructuring because listBounds is
+    // a DOMRect, not a JS object.
+    this.listBounds = {
+      bottom: listBounds.bottom,
+      height: listBounds.height,
+      left: comboBoxBounds.left,
+      right: comboBoxBounds.right,
+      top: listBounds.top,
+      width: comboBoxBounds.width,
+      x: listBounds.x,
+      y: listBounds.y,
     };
 
+    const { position, left, top } = calculatePopoverPosition(comboBoxBounds, this.listBounds, 'bottom', 0, ['bottom', 'top']);
+
+    this.optionsList.style.top = `${top + window.scrollY}px`;
+    this.optionsList.style.left = `${left}px`;
+    this.optionsList.style.width = `${comboBoxBounds.width}px`;
+
     this.setState({
       listPosition: position,
-      listStyles,
     });
   };
 
@@ -432,7 +441,7 @@ export class EuiComboBox extends Component {
       ...rest
     } = this.props;
 
-    const { searchValue, isListOpen, listStyles, listPosition } = this.state;
+    const { searchValue, isListOpen, listPosition } = this.state;
 
     const classes = classNames('euiComboBox', className, {
       'euiComboBox-isOpen': isListOpen,
@@ -461,7 +470,6 @@ export class EuiComboBox extends Component {
             getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
             updatePosition={this.updateListPosition}
             position={listPosition}
-            style={listStyles}
             renderOption={renderOption}
           />
         </EuiPortal>

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -34,7 +34,6 @@ export class EuiComboBoxOptionsList extends Component {
     getSelectedOptionForSearchValue: PropTypes.func,
     updatePosition: PropTypes.func.isRequired,
     position: PropTypes.oneOf(POSITIONS),
-    style: PropTypes.object,
     listRef: PropTypes.func.isRequired,
     renderOption: PropTypes.func,
   }