[PLT-6394] [...] menu no longer hides when not hovered. (#6353)

* [PLT-6394] [...] menu no longer hides when not hovered.

* Fixed dropdown visibility to use same method as main window.

webapp/components/rhs_comment.jsx

@@ -46,6 +46,7 @@ export default class RhsComment extends React.Component {
         this.unpinPost = this.unpinPost.bind(this);
         this.reactEmojiClick = this.reactEmojiClick.bind(this);
         this.emojiPickerClick = this.emojiPickerClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -56,7 +57,8 @@ export default class RhsComment extends React.Component {
             width: '',
             height: '',
             showReactEmojiPicker: false,
-            reactPickerOffset: 15
+            reactPickerOffset: 15,
+            dropdownOpened: false
         };
     }
 
@@ -135,6 +137,10 @@ export default class RhsComment extends React.Component {
             return true;
         }
 
+        if (this.state.dropdownOpened !== nextState.dropdownOpened) {
+            return true;
+        }
+
         return false;
     }
 
@@ -318,7 +324,10 @@ export default class RhsComment extends React.Component {
         }
 
         return (
-            <RhsDropdown dropdownContents={dropdownContents}/>
+            <RhsDropdown
+                dropdownContents={dropdownContents}
+                handleDropdownOpened={this.handleDropdownOpened}
+            />
         );
     }
 
@@ -386,9 +395,19 @@ export default class RhsComment extends React.Component {
             className += ' post--pinned';
         }
 
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
         return className;
     }
 
+    handleDropdownOpened(isOpened) {
+        this.setState({
+            dropdownOpened: isOpened
+        });
+    }
+
     render() {
         const post = this.props.post;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;

webapp/components/rhs_dropdown.jsx

@@ -13,7 +13,8 @@ import * as Agent from 'utils/user_agent.jsx';
 
 export default class RhsDropdown extends Component {
     static propTypes = {
-        dropdownContents: PropTypes.array.isRequired
+        dropdownContents: PropTypes.array.isRequired,
+        handleDropdownOpened: PropTypes.func
     }
 
     constructor(props) {
@@ -26,6 +27,9 @@ export default class RhsDropdown extends Component {
 
     toggleDropdown = () => {
         const showDropdown = !this.state.showDropdown;
+        if (this.props.handleDropdownOpened) {
+            this.props.handleDropdownOpened(showDropdown);
+        }
         if (Agent.isMobile() || Agent.isMobileApp()) {
             const scroll = document.querySelector('.scrollbar--view');
             if (showDropdown) {
@@ -56,4 +60,3 @@ export default class RhsDropdown extends Component {
         );
     }
 }
-

webapp/components/rhs_root_post.jsx

@@ -45,6 +45,7 @@ export default class RhsRootPost extends React.Component {
         this.unpinPost = this.unpinPost.bind(this);
         this.reactEmojiClick = this.reactEmojiClick.bind(this);
         this.emojiPickerClick = this.emojiPickerClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -55,7 +56,8 @@ export default class RhsRootPost extends React.Component {
             width: '',
             height: '',
             showRHSEmojiPicker: false,
-            testStateObj: true
+            testStateObj: true,
+            dropdownOpened: false
         };
     }
 
@@ -121,6 +123,10 @@ export default class RhsRootPost extends React.Component {
             return true;
         }
 
+        if (this.state.dropdownOpened !== nextState.dropdownOpened) {
+            return true;
+        }
+
         return false;
     }
 
@@ -197,9 +203,19 @@ export default class RhsRootPost extends React.Component {
             className += ' post--pinned';
         }
 
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
         return className;
     }
 
+    handleDropdownOpened(isOpened) {
+        this.setState({
+            dropdownOpened: isOpened
+        });
+    }
+
     render() {
         const post = this.props.post;
         const user = this.props.user;
@@ -413,7 +429,10 @@ export default class RhsRootPost extends React.Component {
         var rootOptions = '';
         if (dropdownContents.length > 0) {
             rootOptions = (
-                <RhsDropdown dropdownContents={dropdownContents}/>
+                <RhsDropdown
+                    dropdownContents={dropdownContents}
+                    handleDropdownOpened={this.handleDropdownOpened}
+                />
             );
         }