From 382c1c9da360c75b86fd0d638573491d2f57cafc Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 2 Feb 2021 16:01:01 -0800
Subject: [PATCH] Fix tooltip hover flicker in SpeciesFacesPicker

---
 src/app/ItemPage.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index fd1de91..0886679 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { ClassNames } from "@emotion/react";
+import { ClassNames, Global, css } from "@emotion/react";
 import {
   AspectRatio,
   Button,
@@ -813,6 +813,15 @@ function SpeciesFacesPicker({
           </WrapItem>
         ))}
       </Wrap>
+      <Global
+        // Workaround for https://github.com/chakra-ui/chakra-ui/issues/3257,
+        // which causes tooltip hover flicker.
+        styles={css`
+          .chakra-portal [data-popper-placement] {
+            pointer-events: none;
+          }
+        `}
+      />
     </Box>
   );
 }
@@ -869,10 +878,6 @@ function SpeciesFaceOption({
         <Tooltip
           label={tooltipLabel}
           placement="top"
-          // TODO: This looks great visually, but disrupts the hover state and
-          //       causes flicker. I couldn't figure out how to apply
-          //       `pointer-events: none` to the portal container, which I
-          //       think is intercepting the hover even if the label doesn't.
           gutter={-12}
           // We track hover and focus state manually for the tooltip, so that
           // keyboard nav to switch between options causes the tooltip to