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

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed `EuiXYChart` responsive resize in a flexbox layout ([#1041](https://github.com/elastic/eui/pull/1041))
+- Updated `EuiPopover` to reposition content when the window is scrolled. ([#1062](https://github.com/elastic/eui/pull/1062))
 
 ## [`3.2.1`](https://github.com/elastic/eui/tree/v3.2.1)
 

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,58 @@
+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 }}
+      >
+        <div>
+          This popover scrolls with the button element!
+        </div>
+      </EuiPopover>
+    );
+  }
+}

src/components/popover/popover.js

@@ -153,6 +153,8 @@ export class EuiPopover extends Component {
       this.setState({ suppressingPopover: false, isOpening: true }); // eslint-disable-line react/no-did-mount-set-state
     }
 
+    window.addEventListener('scroll', this.positionPopover);
+
     this.updateFocus();
   }
 
@@ -184,6 +186,7 @@ export class EuiPopover extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('scroll', this.positionPopover);
     clearTimeout(this.closingTransitionTimeout);
   }