diff --git a/docs/src/pages/utils/popper/PositionedPopper.js b/docs/src/pages/utils/popper/PositionedPopper.js
index 342cd2d4c33b07..4cb88a1dd08f86 100644
--- a/docs/src/pages/utils/popper/PositionedPopper.js
+++ b/docs/src/pages/utils/popper/PositionedPopper.js
@@ -20,21 +20,22 @@ const styles = theme => ({
 class PositionedPopper extends React.Component {
   state = {
     anchorEl: null,
+    open: false,
     placement: null,
   };
 
   handleClick = placement => event => {
     const { currentTarget } = event;
     this.setState(state => ({
-      anchorEl: state.placement === placement && state.anchorEl ? null : currentTarget,
+      anchorEl: currentTarget,
+      open: !state.placement === placement || !state.open,
       placement,
     }));
   };
 
   render() {
     const { classes } = this.props;
-    const { anchorEl, placement } = this.state;
-    const open = Boolean(anchorEl);
+    const { anchorEl, open, placement } = this.state;
 
     return (
       <div className={classes.root}>
diff --git a/docs/src/pages/utils/popper/SimplePopper.js b/docs/src/pages/utils/popper/SimplePopper.js
index a77d513aa5de14..adbe4d421a5a8f 100644
--- a/docs/src/pages/utils/popper/SimplePopper.js
+++ b/docs/src/pages/utils/popper/SimplePopper.js
@@ -16,19 +16,20 @@ const styles = theme => ({
 class SimplePopper extends React.Component {
   state = {
     anchorEl: null,
+    open: false,
   };
 
   handleClick = event => {
     const { currentTarget } = event;
     this.setState(state => ({
-      anchorEl: state.anchorEl ? null : currentTarget,
+      anchorEl: currentTarget,
+      open: !state.open,
     }));
   };
 
   render() {
     const { classes } = this.props;
-    const { anchorEl } = this.state;
-    const open = Boolean(anchorEl);
+    const { anchorEl, open } = this.state;
     const id = open ? 'simple-popper' : null;
 
     return (