From e52330ebc63c2e6676b1e21c64b8e76a4b8ba23e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Sun, 1 Apr 2018 16:13:02 -0700 Subject: [PATCH] Update EuiComboBox to match options list width to the input width. --- CHANGELOG.md | 18 ++++++------ src/components/combo_box/combo_box.js | 28 ++++++++++++------- .../combo_box_options_list.js | 1 - 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 59cb1af51acd..f21e2f0bd752 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,21 +2,21 @@ **Bug fixes** -- Visual fix for the focus state of disabled `EuiButton` ([603](https://github.com/elastic/eui/pull/603)) -- `EuiSelect` can pass any node as a value rather than just a string ([603](https://github.com/elastic/eui/pull/603)) - +- Visual fix for the focus state of disabled `EuiButton` ([#603](https://github.com/elastic/eui/pull/603)) +- `EuiSelect` can pass any node as a value rather than just a string ([#603](https://github.com/elastic/eui/pull/603)) +- 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 index fb2bc8bacf6b..87b08d21667f 100644 --- 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} /> 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 index 8e0d6df9e497..9f9e6d62b3da 100644 --- 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, }