Fix voting on category pill on mobile

1 files changed, 10 insertions, 2 deletions

diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index abe6aaf0..c22bbbb9 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -41,7 +41,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             <span style={style}
                 className={"sponsorBlockCategoryPill"} 
                 title={chrome.i18n.getMessage("categoryPillTitleText")}
-                onClick={() => this.state.show && this.setState({ open: !this.state.open })}>
+                onClick={(e) => this.toggleOpen(e)}>
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
                         src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
@@ -58,7 +58,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                                 className="voteButton"
                                 style={{marginLeft: "5px"}}
                                 title={chrome.i18n.getMessage("upvoteButtonInfo")}
-                                onClick={(event) => this.vote(event, 1)}>
+                                onClick={(e) => this.vote(e, 1)}>
                             <ThumbsUpSvg fill={Config.config.colorPalette.white} />
                         </div>
 
@@ -75,6 +75,14 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         );
     }
 
+    private toggleOpen(event: React.MouseEvent): void {
+        event.stopPropagation();
+
+        if (this.state.show) {
+            this.setState({ open: !this.state.open });
+        }
+    }
+
     private async vote(event: React.MouseEvent, type: number): Promise<void> {
         event.stopPropagation();
         if (this.state.segment) {