bug: cannot bind touchevent by touchscreen on pc devices in jsx

[xulihang]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.1.2

Current Behavior

The touch event works well on mobile devices but not on a PC device with a touch screen. Only pointer events can be triggered.

Expected Behavior

Touch events should be triggered using a PC device's touchscreen as well.

System Info

No response

Steps to Reproduce

Test the touch events on a PC device with a touch screen.

We can see that the events are not triggered.

<svg 
      version="1.1" 
      ref={(el) => this.svgElement = el as SVGElement}
      class="cropper-svg"
      xmlns="http://www.w3.org/2000/svg"
      onTouchMove={(e:TouchEvent)=>this.onSVGTouchMove(e)}
></svg>

Code Reproduction URL

https://github.com/xulihang/stencil-touchevent-test

Additional Information

No response

[xulihang]

The event listener works using JavaScript but not in JSX.

componentDidLoad(){
    this.containerElement.addEventListener("touchmove", (e:TouchEvent) => {
      this.onContainerTouchMove(e);
    })
    this.containerElement.addEventListener("touchend", () => {
      this.previousDistance = undefined;
    })
  }

[rwaskiewicz]

Hey @xulihang 👋

While I think I have an idea as to what's going on here, the reproduction case is a bit too large for us to use here. Can you please create a minimal code reproduction sample for the team to pull down? Ideally, this should be a Stencil Component Starter project (npm init stencil@latest component) with any changes applied to it to demonstrate the issue. This helps the speed of triaging issues immensely, and would be greatly appreciated. To move forward with this, please let me know when you've updated the reproduction case.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[xulihang]

a minimal code reproduction sample

I've made a minimal sample here: https://github.com/xulihang/stencil-touchevent-test

[rwaskiewicz]

Thanks! I've verified something here isn't working as expected, and have ingested this into our backlog for someone to take a look!

[xulihang]

Hi. How is this issue going?