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

Click-away (close on outside click) does not work in ShadowDom for action "click"

Abierto
#382 0 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza con la lógica inPopupOrChild del paquete trigger y reproduce el comportamiento usando el CodeSandbox enlazado dentro de un Shadow DOM. Rastrea cómo se retargetean los eventos mousedown y click y, a continuación, verifica que hacer clic fuera del popover lo cierre, mientras que hacer clic en el trigger o en el contenido del popover no lo haga.

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

Descripción

When using the popover from Antd in a WebComponent with the "click" action the "click away" does not work, the popover is never closed. When clicking on the trigger button the popover is closed.

<Popover content={<div>demo</div>} title="Title" trigger="click">
 <Button>Click me</Button>
</Popover>

Expected:
Clicking on anything other than the popover content or the trigger (button in this case) the popover should close.

Actuall:
The popover is not closed.

Findings:
When using a popover from Antd inside a ShadoDom and using the trigger "click" the inPopupOrChild incorrectly thinks the mousedown/click is inside the content. There is something wrong in the checking of inPopupOrChild. The event retargeting makes the event come from the webcomponent and somehow the trigger thinks this is inside the content.

Workaround:
Catch the onMouseDown event in the webcomponent ctor and stop the bubbling with stopPropagation stops the event from reaching the global listener a second time.

Repro:
https://codesandbox.io/p/devbox/modest-frog-tm3r6v

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.