use 'Overlay' instead if 'OverlayTrigger'

1 files changed, 28 insertions, 22 deletions

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