react-component / react-component/trigger

Animated popups can get stuck open if mouse enters then leaves very quickly

Aperta
#157 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.