From 29bcc4a0d1128a5b1db455fef22f21e092f79fa5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 23 May 2020 20:01:16 -0500
Subject: [PATCH] Rearrange Like button events to prevent clashing

---
 app/gabsocial/components/icon_button.js                | 8 ++++++++
 app/gabsocial/components/status_action_bar.js          | 3 ++-
 app/gabsocial/features/status/components/action_bar.js | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/gabsocial/components/icon_button.js b/app/gabsocial/components/icon_button.js
index 1b681c378..2c12626ce 100644
--- a/app/gabsocial/components/icon_button.js
+++ b/app/gabsocial/components/icon_button.js
@@ -13,6 +13,8 @@ export default class IconButton extends React.PureComponent {
     title: PropTypes.string.isRequired,
     icon: PropTypes.string.isRequired,
     onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     size: PropTypes.number,
     active: PropTypes.bool,
     pressed: PropTypes.bool,
@@ -36,6 +38,8 @@ export default class IconButton extends React.PureComponent {
     overlay: false,
     tabIndex: '0',
     onClick: () => {},
+    onMouseEnter: () => {},
+    onMouseLeave: () => {},
   };
 
   handleClick = (e) =>  {
@@ -90,6 +94,8 @@ export default class IconButton extends React.PureComponent {
           title={title}
           className={classes}
           onClick={this.handleClick}
+          onMouseEnter={this.props.onMouseEnter}
+          onMouseLeave={this.props.onMouseLeave}
           tabIndex={tabIndex}
           disabled={disabled}
         >
@@ -113,6 +119,8 @@ export default class IconButton extends React.PureComponent {
             title={title}
             className={classes}
             onClick={this.handleClick}
+            onMouseEnter={this.props.onMouseEnter}
+            onMouseLeave={this.props.onMouseLeave}
             tabIndex={tabIndex}
             disabled={disabled}
           >
diff --git a/app/gabsocial/components/status_action_bar.js b/app/gabsocial/components/status_action_bar.js
index 04c78eba3..a271d6634 100644
--- a/app/gabsocial/components/status_action_bar.js
+++ b/app/gabsocial/components/status_action_bar.js
@@ -137,6 +137,7 @@ class StatusActionBar extends ImmutablePureComponent {
       } else {
         this.props.onOpenUnauthorizedModal();
       }
+      this.setState({ emojiSelectorVisible: false });
     };
   }
 
@@ -356,7 +357,6 @@ class StatusActionBar extends ImmutablePureComponent {
           className='status__action-bar__counter status__action-bar__counter--favourite'
           onMouseEnter={this.handleLikeButtonHover}
           onMouseLeave={this.handleLikeButtonLeave}
-          onClick={this.handleLikeButtonClick}
           ref={this.setRef}
         >
           <EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
@@ -367,6 +367,7 @@ class StatusActionBar extends ImmutablePureComponent {
             title={intl.formatMessage(messages.favourite)}
             icon='thumbs-up'
             emoji={meEmojiReact}
+            onClick={this.handleLikeButtonClick}
           />
           {emojiReactCount !== 0 && <span className='detailed-status__link'>{emojiReactCount}</span>}
         </div>
diff --git a/app/gabsocial/features/status/components/action_bar.js b/app/gabsocial/features/status/components/action_bar.js
index cb7c83711..20dc02eda 100644
--- a/app/gabsocial/features/status/components/action_bar.js
+++ b/app/gabsocial/features/status/components/action_bar.js
@@ -309,7 +309,6 @@ class ActionBar extends React.PureComponent {
           className='detailed-status__button detailed-status__button--favourite'
           onMouseEnter={this.handleLikeButtonHover}
           onMouseLeave={this.handleLikeButtonLeave}
-          onClick={this.handleLikeButtonClick}
           ref={this.setRef}
         >
           <EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
@@ -321,6 +320,7 @@ class ActionBar extends React.PureComponent {
             icon='thumbs-up'
             emoji={meEmojiReact}
             text='Like'
+            onClick={this.handleLikeButtonClick}
           />
         </div>
         {shareButton}