Fix bug where a position: fixed popover content doesn't scroll

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - `EuiComboBox` now applies the provided `data-test-subj` to its options list element with the suffix `-optionsList` so you can find a specific combo box instance's options list. This wasn't previously possible because the options list is attached to the body element, not the combo box element. This is in addition to the existing `data-test-subj="comboBoxOptionsList"`. ([#1054](https://github.com/elastic/eui/pull/1054))
 - EUI now provides minified versions of the themes' CSS files. ([#1070](https://github.com/elastic/eui/pull/1070))
+- Add `repositionOnScroll` prop to `EuiPopover` which enables repositioning the popover when the window is scrolled. ([#1064](https://github.com/elastic/eui/pull/1064))
 
 **Bug fixes**
 

src-docs/src/views/popover/popover_example.js

@@ -44,6 +44,9 @@ import PopoverContainer from './popover_container';
 const popoverContainerSource = require('!!raw-loader!./popover_container');
 const popoverContainerHtml = renderToHtml(PopoverContainer);
 
+import PopoverFixed from './popover_fixed';
+const popoverFixedSource = require('!!raw-loader!./popover_fixed');
+const popoverFixedHtml = renderToHtml(PopoverFixed);
 
 export const PopoverExample = {
   title: 'Popover',
@@ -204,5 +207,22 @@ export const PopoverExample = {
       </div>
     ),
     demo: <PopoverHTMLElementAnchor />,
+  }, {
+    title: 'Popover on a static element',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: popoverFixedSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: popoverFixedHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Popover content even works on <EuiCode>position: static;</EuiCode> elements.
+        </p>
+      </div>
+    ),
+    demo: <PopoverFixed />,
   }],
 };

src-docs/src/views/popover/popover_fixed.js

@@ -0,0 +1,59 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiPopover,
+} from '../../../../src/components';
+
+export default class PopoverContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  onButtonClick = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  }
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  setPanelRef = node => this.panel = node;
+
+  render() {
+    const button = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onButtonClick}
+        style={{ background: 'white' }}
+      >
+        Show fixed popover
+      </EuiButton>
+    );
+
+    return (
+      <EuiPopover
+        button={button}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover}
+        style={{ position: 'fixed', bottom: 50, right: 50 }}
+        repositionOnScroll={true}
+      >
+        <div>
+          This popover scrolls with the button element!
+        </div>
+      </EuiPopover>
+    );
+  }
+}

src/components/popover/popover.js

@@ -153,6 +153,10 @@ export class EuiPopover extends Component {
       this.setState({ suppressingPopover: false, isOpening: true }); // eslint-disable-line react/no-did-mount-set-state
     }
 
+    if (this.props.repositionOnScroll) {
+      window.addEventListener('scroll', this.positionPopover);
+    }
+
     this.updateFocus();
   }
 
@@ -169,6 +173,15 @@ export class EuiPopover extends Component {
       });
     }
 
+    // update scroll listener
+    if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
+      if (this.props.repositionOnScroll) {
+        window.addEventListener('scroll', this.positionPopover);
+      } else {
+        window.removeEventListener('scroll', this.positionPopover);
+      }
+    }
+
     // The popover is being closed.
     if (prevProps.isOpen && !this.props.isOpen) {
       // If the user has just closed the popover, queue up the removal of the content after the
@@ -184,6 +197,7 @@ export class EuiPopover extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('scroll', this.positionPopover);
     clearTimeout(this.closingTransitionTimeout);
   }
 
@@ -421,6 +435,7 @@ EuiPopover.propTypes = {
     PropTypes.node,
     PropTypes.instanceOf(HTMLElement)
   ]),
+  repositionOnScroll: PropTypes.bool,
 };
 
 EuiPopover.defaultProps = {