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

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Added `onTableChange` callback to `EuiInMemoryTable` which notifies on sorting and pagination changes. ([#1060](https://github.com/elastic/eui/pull/1060))
 - `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 fixed element',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: popoverFixedSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: popoverFixedHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Popover content even works on <EuiCode>position: fixed;</EuiCode> elements.
+        </p>
+      </div>
+    ),
+    demo: <PopoverFixed />,
   }],
 };

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

@@ -0,0 +1,67 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiPopover,
+} from '../../../../src/components';
+
+export default class PopoverContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isExampleShown: false,
+      isPopoverOpen: false,
+    };
+  }
+
+  toggleExample = () => this.setState(({ isExampleShown }) => ({ isExampleShown: !isExampleShown }))
+
+  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 (
+      <React.Fragment>
+        <EuiButton onClick={this.toggleExample}>Toggle Example</EuiButton>
+        {this.state.isExampleShown && (
+          <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>
+        )}
+      </React.Fragment>
+    );
+  }
+}

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);
   }
 
@@ -420,6 +434,8 @@ EuiPopover.propTypes = {
     PropTypes.node,
     PropTypes.instanceOf(HTMLElement)
   ]),
+  /** When `true`, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. */
+  repositionOnScroll: PropTypes.bool,
 };
 
 EuiPopover.defaultProps = {