OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Fix tooltip hover flicker in SpeciesFacesPicker

Browse source
This commit is contained in:
Emi Matchu 2021-02-02 16:01:01 -08:00
parent cbe519c59f
commit 382c1c9da3
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/ItemPage.js
View file

@ -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