react-component / react-component/trigger
Animated popups can get stuck open if mouse enters then leaves very quickly
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 391
- Fork
- 245
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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.
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Non sono indicati file sorgente né test. Per prima cosa riproduci l’esempio di Trigger fornito con la transizione fade e movimenti rapidi del mouse, quindi traccia il comportamento di hover e leave; il lavoro è completato quando il popup si chiude in modo affidabile dopo che il puntatore lascia l’area, anche durante ingressi e uscite rapide.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100