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);
  }