PLT-4754 Fix RHS options menu (#4552)

4 files changed, 88 insertions, 35 deletions

diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index c7b005845..416c0fe4b 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -6,6 +6,7 @@ import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
+import RhsDropdown from 'components/rhs_dropdown.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -218,24 +219,8 @@ export default class RhsComment extends React.Component {
         }
 
         return (
-            <div className='dropdown'>
-                <a
-                    href='#'
-                    className='post__dropdown dropdown-toggle'
-                    type='button'
-                    data-toggle='dropdown'
-                    aria-expanded='false'
-                />
-                <div className='dropdown-menu__content'>
-                    <ul
-                        className='dropdown-menu'
-                        role='menu'
-                    >
-                        {dropdownContents}
-                    </ul>
-                </div>
-            </div>
-            );
+            <RhsDropdown dropdownContents={dropdownContents}/>
+        );
     }
 
     render() {
diff --git a/webapp/components/rhs_dropdown.jsx b/webapp/components/rhs_dropdown.jsx
new file mode 100644
index 000000000..c42e8c8e5
--- /dev/null
+++ b/webapp/components/rhs_dropdown.jsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as Agent from 'utils/user_agent.jsx';
+import RhsDropdownMenu from 'components/rhs_dropdown_menu.jsx';
+
+import {Dropdown} from 'react-bootstrap';
+import React from 'react';
+
+export default class RhsDropdown extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.toggleDropdown = this.toggleDropdown.bind(this);
+
+        this.state = {
+            showDropdown: false
+        };
+    }
+
+    toggleDropdown(e) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        const showDropdown = !this.state.showDropdown;
+        if (Agent.isMobile() || Agent.isMobileApp()) {
+            const scroll = document.querySelector('.scrollbar--view');
+            if (showDropdown) {
+                scroll.style.overflow = 'hidden';
+            } else {
+                scroll.style.overflow = 'scroll';
+            }
+        }
+
+        this.setState({showDropdown});
+    }
+
+    render() {
+        return (
+            <Dropdown
+                open={this.state.showDropdown}
+                onClose={this.toggleDropdown}
+            >
+                <a
+                    href='#'
+                    className='post__dropdown dropdown-toggle'
+                    bsRole='toggle'
+                    onClick={this.toggleDropdown}
+                />
+                <RhsDropdownMenu>
+                    {this.props.dropdownContents}
+                </RhsDropdownMenu>
+            </Dropdown>
+        );
+    }
+}
+
+RhsDropdown.propTypes = {
+    dropdownContents: React.PropTypes.array.isRequired
+};
diff --git a/webapp/components/rhs_dropdown_menu.jsx b/webapp/components/rhs_dropdown_menu.jsx
new file mode 100644
index 000000000..6efaa9dea
--- /dev/null
+++ b/webapp/components/rhs_dropdown_menu.jsx
@@ -0,0 +1,22 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {Dropdown} from 'react-bootstrap';
+import React from 'react';
+
+export default class RhsDropdownMenu extends Dropdown.Menu {
+    constructor(props) { //eslint-disable-line no-useless-constructor
+        super(props);
+    }
+
+    render() {
+        return (
+            <div
+                className='dropdown-menu__content'
+                onClick={this.props.onClose}
+            >
+                {super.render()}
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index aa663bda7..0dae5976f 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -6,6 +6,7 @@ import PostBodyAdditionalContent from 'components/post_view/components/post_body
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
+import RhsDropdown from 'components/rhs_dropdown.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -228,23 +229,7 @@ export default class RhsRootPost extends React.Component {
         var rootOptions = '';
         if (dropdownContents.length > 0) {
             rootOptions = (
-                <div className='dropdown'>
-                    <a
-                        href='#'
-                        className='post__dropdown dropdown-toggle'
-                        type='button'
-                        data-toggle='dropdown'
-                        aria-expanded='false'
-                    />
-                    <div className='dropdown-menu__content'>
-                        <ul
-                            className='dropdown-menu'
-                            role='menu'
-                        >
-                            {dropdownContents}
-                        </ul>
-                    </div>
-                </div>
+                <RhsDropdown dropdownContents={dropdownContents}/>
             );
         }