let's merge

docs/src/pages/utils/popper/FakedReferencePopper.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import EventListener from 'react-event-listener';
 import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 import Fade from '@material-ui/core/Fade';
@@ -29,31 +30,31 @@ class FakedReferencePopper extends React.Component {
 
     const boundingClientRect = selection.getRangeAt(0).getBoundingClientRect();
 
-    const virtualAnchorEl = {
-      clientWidth: boundingClientRect.width,
-      clientHeight: boundingClientRect.height,
-      getBoundingClientRect: () => boundingClientRect,
-    };
-
     this.setState(state => ({
-      anchorEl: virtualAnchorEl,
+      anchorEl: {
+        clientWidth: boundingClientRect.width,
+        clientHeight: boundingClientRect.height,
+        getBoundingClientRect: () => boundingClientRect,
+      },
       open: !state.open,
     }));
   };
 
   handleClose = () => {
+    if (!this.state.open) {
+      return;
+    }
+
     this.setState({ open: false });
   };
 
   render() {
     const { classes } = this.props;
     const { anchorEl, open } = this.state;
-    const id = open ? 'simple-popper' : null;
 
     return (
       <div onMouseLeave={this.handleClose}>
-        <Typography variant="caption">Highlight part of the text to see the popper</Typography>
-        <Typography variant="body1" onMouseUp={this.handleMouseUp}>
+        <Typography onMouseUp={this.handleMouseUp}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
           amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
           finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
@@ -62,7 +63,7 @@ class FakedReferencePopper extends React.Component {
           facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
           lacinia tellus a libero volutpat maximus.
         </Typography>
-        <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        <Popper open={open} anchorEl={anchorEl} transition placement="bottom-start">
           {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
               <Paper>
@@ -71,6 +72,7 @@ class FakedReferencePopper extends React.Component {
             </Fade>
           )}
         </Popper>
+        <EventListener target="window" onScroll={this.handleClose} />
       </div>
     );
   }

docs/src/pages/utils/popper/popper.md

@@ -13,7 +13,7 @@ Things to know when using the `Popper` component:
 - The children is [`Portal`](/utils/portal) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
 - The scroll and click away aren't blocked like with the [`Popover`](/utils/popover) component.
   The placement of the popper updates with the available area in the viewport.
-- The `anchorEl` is passed as the reference object to create a new `Popper` instance. It can be faked by creating an object shaped like the [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118).
+- The `anchorEl` is passed as the reference object to create a new `Popper` instance.
 
 ## Simple Popper
 
@@ -33,4 +33,9 @@ Things to know when using the `Popper` component:
 
 ## Faked reference object
 
+The `anchorEl` property can be a reference to a fake DOM element.
+You just need to create an object shaped like the [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118-L123).
+
+Highlight part of the text to see the popper:
+
 {{"demo": "pages/utils/popper/FakedReferencePopper.js"}}