PLT-3801 Fix toggle dropdown Main menu (#4014)

2 files changed, 11 insertions, 16 deletions

diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx
index f7547f803..413942865 100644
--- a/webapp/components/navbar_dropdown.jsx
+++ b/webapp/components/navbar_dropdown.jsx
@@ -1,8 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
@@ -49,14 +47,6 @@ export default class NavbarDropdown extends React.Component {
     }
 
     componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', () => {
-            $('.sidebar--left .dropdown-menu').scrollTop(0);
-            this.blockToggle = true;
-            setTimeout(() => {
-                this.blockToggle = false;
-            }, 100);
-        });
-
         TeamStore.addChangeListener(this.onTeamChange);
         document.addEventListener('keydown', this.openAccountSettings);
     }
@@ -69,7 +59,6 @@ export default class NavbarDropdown extends React.Component {
     }
 
     componentWillUnmount() {
-        $(ReactDOM.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown');
         TeamStore.removeChangeListener(this.onTeamChange);
         document.removeEventListener('keydown', this.openAccountSettings);
     }
@@ -363,9 +352,8 @@ export default class NavbarDropdown extends React.Component {
                     <a
                         href='#'
                         className='dropdown-toggle'
-                        data-toggle='dropdown'
                         role='button'
-                        aria-expanded='false'
+                        onClick={this.props.toggleDropdown}
                     >
                         <span
                             className='dropdown__icon'
@@ -449,5 +437,6 @@ NavbarDropdown.propTypes = {
     teamType: React.PropTypes.string,
     teamDisplayName: React.PropTypes.string,
     teamName: React.PropTypes.string,
-    currentUser: React.PropTypes.object
+    currentUser: React.PropTypes.object,
+    toggleDropdown: React.PropTypes.function
 };
diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx
index 9a7db54f8..a57a809be 100644
--- a/webapp/components/sidebar_header.jsx
+++ b/webapp/components/sidebar_header.jsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import NavbarDropdown from './navbar_dropdown.jsx';
 import 'bootstrap';
 
@@ -49,7 +48,13 @@ export default class SidebarHeader extends React.Component {
             this.refs.dropdown.blockToggle = false;
             return;
         }
-        $('.team__header').find('.dropdown-toggle').dropdown('toggle');
+        const menu = document.querySelector('.team__header .dropdown-toggle');
+        const isOpen = menu.parentElement.classList.toggle('open');
+        menu.setAttribute('aria-expanded', isOpen);
+
+        if (!isOpen) {
+            document.querySelector('.sidebar--left .dropdown-menu').scrollTop = 0;
+        }
     }
     render() {
         var me = this.props.currentUser;
@@ -100,6 +105,7 @@ export default class SidebarHeader extends React.Component {
                     teamDisplayName={this.props.teamDisplayName}
                     teamName={this.props.teamName}
                     currentUser={this.props.currentUser}
+                    toggleDropdown={this.toggleDropdown}
                 />
             </div>
         );