From d178007954d3638f8f25a23580e7b0224855993c 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 | 23 +++++++-------- src/components/combo_box/combo_box.js | 28 ++++++++++++------- .../combo_box_options_list.js | 1 - 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a8f00da4f2..70c96f19a85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,25 +1,26 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- Modifying drop shadow intensities and color. ([607](https://github.com/elastic/eui/pull/607)) -- Removed extraneous `global_styling/mixins/_forms.scss` file and importing the correct files in the `filter_group.scss` and `combo_box.scss` files. ([609](https://github.com/elastic/eui/pull/609)) +- Modified drop shadow intensities and color. ([#607](https://github.com/elastic/eui/pull/607)) +- Removed extraneous `global_styling/mixins/_forms.scss` file and importing the correct files in the `filter_group.scss` and `combo_box.scss` files. ([#609](https://github.com/elastic/eui/pull/609)) **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)) -- Fixed a typo in the flex TypeScript definition ([629](https://github.com/elastic/eui/pull/629)) +- 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 a typo in the flex TypeScript definition ([#629](https://github.com/elastic/eui/pull/629)) +- 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 fb2bc8bacf6..87b08d21667 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 8e0d6df9e49..9f9e6d62b3d 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, }