Switch back to absolute positioning and remove scroll listener to imp…

…rove performance, particularly on IE11.
elastic · Apr 4, 2018 · 9ad1c82 · 9ad1c82
1 parent 3e5b363
commit 9ad1c82
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -117,7 +117,7 @@ export class EuiComboBox extends Component {
 
     const { position, left, top } = calculatePopoverPosition(comboBoxBounds, this.listBounds, 'bottom', 0, ['bottom', 'top']);
 
-    this.optionsList.style.top = `${top}px`;
+    this.optionsList.style.top = `${top + window.scrollY}px`;
     this.optionsList.style.left = `${left}px`;
     this.optionsList.style.width = `${comboBoxBounds.width}px`;
 

diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -1,15 +1,16 @@
 /**
  * 1. Make width match that of the input and tweak position to match.
- * 2. We can't use absolute position here because this will cause a scrollbar to show up when
- *    the portal is appended to the body. This throws off our logic for positioning the
+ * 2. Put the list at the top of the screen, otherwise it will cause a scrollbar to show up when
+ *    the portal is appended to the body. This would throw off our logic for positioning the
  *    list beneath the input.
  */
 .euiComboBoxOptionsList {
   @include euiFormControlSize;
   box-sizing: content-box; /* 1 */
   margin-left: -1px; /* 1 */
   z-index: $euiZComboBox;
-  position: fixed; /* 2 */
+  position: absolute; /* 2 */
+  top: 0; /* 2 */
 }
 
 .euiComboBoxOptionsList--bottom {

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
@@ -48,7 +48,6 @@ export class EuiComboBoxOptionsList extends Component {
   componentDidMount() {
     this.updatePosition();
     window.addEventListener('resize', this.updatePosition);
-    window.addEventListener('scroll', this.updatePosition);
   }
 
   componentWillUpdate(nextProps) {
@@ -66,7 +65,6 @@ export class EuiComboBoxOptionsList extends Component {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.updatePosition);
-    window.removeEventListener('scroll', this.updatePosition);
   }
 
   listRef = node => {