From 001c142308ebd675db053372809f82204e863e52 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 19 Jul 2018 11:24:51 +0200
Subject: [PATCH] [Popper] Fix the transition in the demos (#12194)

---
 docs/src/pages/utils/popper/PositionedPopper.js | 7 ++++---
 docs/src/pages/utils/popper/SimplePopper.js     | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

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 (