react-component / react-component/trigger
Animated popups can get stuck open if mouse enters then leaves very quickly
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 391
- Forks
- 245
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
Pretty much what the title says. I'm on version 4.0.0-alpha.7. Given an element like this:
<Trigger
action={["hover"]}
popup={<span>Hello There</span>}
popupTransitionName="fade"
mouseLeaveDelay={0}
popupAlign={{
points: ["tc", "bc"],
offset: [0, 3]
}}
>
<p>Test</p>
</Trigger>
And a style like the fade animation from rc-animate's examples. Or even something simple like this:
.rc-trigger-popup {
display: inline-block;
opacity: 1;
transition: opacity 1s;
}
.rc-trigger-popup-hidden {
display: none;
}
.fade-enter-active {
opacity: 1 !important;
}
.fade-leave-active {
opacity: 0;
}
For the most part the trigger/popup works normally. Hovering over the "Test" text creates the popup, which fades in, and then fades out when you stop hovering over the text. The issue comes up when you move your mouse quickly over the text. Sometimes it works normally, other times the popup gets stuck open even after the mouse has left. Increasing the mouseLeaveDelay seems to mitigate the problem, but that's not really a solution.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Keine Quelldatei oder kein Test ist angegeben. Reproduziere zunächst das bereitgestellte Trigger-Beispiel mit dem Fade-Übergang und schnellen Mausbewegungen, und verfolge dann das Hover- und Leave-Verhalten; als erledigt gilt die Aufgabe, wenn sich das Popup zuverlässig schließt, nachdem der Zeiger den Bereich verlassen hat, auch bei schnellem Ein- und Austritt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 35/100