Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#157 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

No se indica ningún archivo fuente ni ninguna prueba. Primero reproduce el ejemplo de Trigger proporcionado con la transición de fade y movimientos rápidos del ratón; después sigue el comportamiento de hover y leave. Se considera terminado cuando el popup se cierra de forma fiable después de que el puntero abandona el área, incluso durante una entrada y salida rápidas.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
391
Forks
245
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-component/trigger

Todos los issues de react-component/trigger

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.