bug: can't stop propagation of react synthetic events

Abierto
  • ¿Algo no está bien?
#5,937 3 comentarios 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Comienza con el repositorio de reproducción enlazado e inspecciona App.jsx, leaf-component.tsx y parent-component.tsx para seguir el flujo de eventos. Ejecuta la reproducción usando la versión de Stencil indicada y verifica el orden de los handlers de React y Stencil. El trabajo estará terminado cuando React stopPropagation impida que se ejecute el handler de Stencil del componente padre, con este comportamiento cubierto por una prueba de regresión si el proyecto proporciona un punto de entrada de pruebas adecuado.

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

Descripción

Bug: Validated
Prerequisites
Stencil Version

4.19.2

Current Behavior

example-repo I tried several times creating a mono repo example for this by reading this guide but still getting some errors so i would like you to inspect App.js , leaf-component.tsx and parent-component.tsx to understand the event handling flow.

  • This issue only occurs with React
  • React attached event listeners cannot stop propagation on stencil side event listeners of parent component
  • attaching event listeners on react side with ref works as workaround.
export class ParentComponent {
  clickHandler() {
    console.log('parent click');
  }
  render() {
    return (
      <Host onClick={this.clickHandler}>
        <span>parent component</span>
        <slot />
    </Host>
    );
  }
}

<ParentComponent>
        <LeafComponent onClick={(e) => {
          console.log('leaf click');
          e.stopPropagation();
          e.preventDefault();
        }}/>
      </ParentComponent>
Expected Behavior

I expect that, e.stopPropagation() should stop the propagation therefore only leaf event handler should run.

System Info
Build: 1719938890
     Stencil: 4.19.2 🏉
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1
Steps to Reproduce
  • Create a component as parent component with event handler and slot
  • Create another component as leaf component
  • Build react output of these two components
  • Create a react app
  • Render this
<ParentComponent>
        <LeafComponent onClick={(e) => {
          console.log('leaf click');
          e.stopPropagation();
          e.preventDefault();
        }}/>
      </ParentComponent>
  • stopPropagation doesn't work and stencil side attached event handler is fired before react side handler
Code Reproduction URL

https://github.com/itsjustaplant/stencil-mono

Additional Information

No response

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

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 stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.