Moved code to change direction of dropdown to run when dropdown is shown (#5100)

1 files changed, 10 insertions, 6 deletions

diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index c4de46e8f..3f38bdffe 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -21,7 +21,7 @@ export default class PostInfo extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleDropdownClick = this.handleDropdownClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
         this.handlePermalink = this.handlePermalink.bind(this);
         this.removePost = this.removePost.bind(this);
         this.flagPost = this.flagPost.bind(this);
@@ -32,9 +32,12 @@ export default class PostInfo extends React.Component {
         this.editDisableAction = new DelayedAction(this.handleEditDisable);
     }
 
-    handleDropdownClick(e) {
-        var position = $('#post-list').height() - $(e.target).offset().top;
-        var dropdown = $(e.target).closest('.col__reply').find('.dropdown-menu');
+    handleDropdownOpened() {
+        this.props.handleDropdownOpened(true);
+
+        const position = $('#post-list').height() - $(this.refs.dropdownToggle).offset().top;
+        const dropdown = $(this.refs.dropdown);
+
         if (position < dropdown.height()) {
             dropdown.addClass('bottom');
         }
@@ -45,7 +48,7 @@ export default class PostInfo extends React.Component {
     }
 
     componentDidMount() {
-        $('#post_dropdown' + this.props.post.id).on('shown.bs.dropdown', () => this.props.handleDropdownOpened(true));
+        $('#post_dropdown' + this.props.post.id).on('shown.bs.dropdown', this.handleDropdownOpened);
         $('#post_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false));
     }
 
@@ -205,15 +208,16 @@ export default class PostInfo extends React.Component {
                 id={'post_dropdown' + this.props.post.id}
             >
                 <a
+                    ref='dropdownToggle'
                     href='#'
                     className='dropdown-toggle post__dropdown theme'
                     type='button'
                     data-toggle='dropdown'
                     aria-expanded='false'
-                    onClick={this.handleDropdownClick}
                 />
                 <div className='dropdown-menu__content'>
                     <ul
+                        ref='dropdown'
                         className='dropdown-menu'
                         role='menu'
                     >