use 'Overlay' instead if 'OverlayTrigger'

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;
+        this.setState({showPopover: false});
-        if (overlay.state.isOverlayShown) {
-            overlay.setState({isOverlayShown: false});
-        }
     }
 
     render() {
@@ -188,23 +189,12 @@ export default class PopoverListMembers extends React.Component {
         }
 
         return (
-            <OverlayTrigger
-                ref='overlay'
-                trigger='click'
-                placement='bottom'
-                rootClose={true}
-                overlay={
-                    <Popover
-                        title='Members'
-                        id='member-list-popover'
-                    >
             <div>
-                            {popoverHtml}
+                <div
-                        </div>
+                    id='member_popover'
-                    </Popover>
+                    ref='member_popover_target'
-                }
+                    onClick={(e) => this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})}
                 >
-            <div id='member_popover'>
                     <div>
                         {countText}
                         <span
@@ -213,7 +203,23 @@ export default class PopoverListMembers extends React.Component {
                         />
                     </div>
                 </div>
-            </OverlayTrigger>
+                <Overlay
+                    rootClose={true}
+                    onHide={this.closePopover}
+                    show={this.state.showPopover}
+                    target={() => this.state.popoverTarget}
+                    placement='bottom'
+                >
+                    <Popover
+                        title='Members'
+                        id='member-list-popover'
+                    >
+                        <div>
+                            {popoverHtml}
+                        </div>
+                    </Popover>
+                </Overlay>
+            </div>
         );
     }
 }