From 2008a20d9db400d942e0b2bd0bd4b8b432199731 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Mon, 26 Oct 2015 22:49:03 +0100
Subject: use 'Overlay' instead if 'OverlayTrigger'

---
 web/react/components/popover_list_members.jsx | 50 +++++++++++++++------------
 1 file changed, 28 insertions(+), 22 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index b7d4fd9a9..4f30adc43 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -3,7 +3,7 @@
 
 var UserStore = require('../stores/user_store.jsx');
 var Popover = ReactBootstrap.Popover;
-var OverlayTrigger = ReactBootstrap.OverlayTrigger;
+var Overlay = ReactBootstrap.Overlay;
 const Utils = require('../utils/utils.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
@@ -22,6 +22,10 @@ export default class PopoverListMembers extends React.Component {
         this.closePopover = this.closePopover.bind(this);
     }
 
+    componentWillMount() {
+        this.setState({showPopover: false});
+    }
+
     componentDidMount() {
         const originalLeave = $.fn.popover.Constructor.prototype.leave;
         $.fn.popover.Constructor.prototype.leave = function onLeave(obj) {
@@ -85,10 +89,7 @@ export default class PopoverListMembers extends React.Component {
     }
 
     closePopover() {
-        var overlay = this.refs.overlay;
-        if (overlay.state.isOverlayShown) {
-            overlay.setState({isOverlayShown: false});
-        }
+        this.setState({showPopover: false});
     }
 
     render() {
@@ -188,12 +189,27 @@ export default class PopoverListMembers extends React.Component {
         }
 
         return (
-            <OverlayTrigger
-                ref='overlay'
-                trigger='click'
-                placement='bottom'
-                rootClose={true}
-                overlay={
+            <div>
+                <div
+                    id='member_popover'
+                    ref='member_popover_target'
+                    onClick={(e) => this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})}
+                >
+                    <div>
+                        {countText}
+                        <span
+                            className='fa fa-user'
+                            aria-hidden='true'
+                        />
+                    </div>
+                </div>
+                <Overlay
+                    rootClose={true}
+                    onHide={this.closePopover}
+                    show={this.state.showPopover}
+                    target={() => this.state.popoverTarget}
+                    placement='bottom'
+                >
                     <Popover
                         title='Members'
                         id='member-list-popover'
@@ -202,18 +218,8 @@ export default class PopoverListMembers extends React.Component {
                             {popoverHtml}
                         </div>
                     </Popover>
-                }
-            >
-            <div id='member_popover'>
-                <div>
-                    {countText}
-                    <span
-                        className='fa fa-user'
-                        aria-hidden='true'
-                    />
-                </div>
+                </Overlay>
             </div>
-            </OverlayTrigger>
         );
     }
 }
-- 
cgit v1.2.3-1-g7c22