onTouchStart not being attached to DOM elements when using jsx

[vitorrloureiro]

Astro Info

Astro                    v4.6.3
Node                     v20.10.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When creating a React or Solid component with jsx and writing:

function MyComponent() {
  return <div onTouchStart={() => {console.log("foo")})> bar </div> 
}

The event handler is not added to the DOM both using pnpm dev and pnpm build + pnpm preview.

I can see in my dist folder that indeed the code for the event exists. But somehow it's not being added to the DOM.

What's the expected result?

The event should be attached to the correct DOM element.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-s1yqym?file=src%2Fcomponents%2FCounter.tsx

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

Where is onTouchStart coming from? Is it something about view transitions? I couldn't find anything in the documentation

[Princesseuh]

onTouchStart is the React equivalent of touchstart, see https://react.dev/reference/react-dom/components/common#touchevent-handler

[matthewp]

Seems to be working here, what am I missing?

OnTouchStart.mp4

Also, this is very unlikely to have anything to do with Astro. Astro just renders the React component. Any unexpected behavior once that happens is probably either a misuse of their APIs or a React bug. In any case, this seems to be working as you'd like.

I think you probably want to use useCallback here to prevent adding/removing event listening every time that event fires. Maybe there's something going on where the event listener is removed too quickly causing the log not to occur and that's what you're experiencing, just a guess though.

[vitorrloureiro]

@matthewp I wasn't sure this problem was browser specific but now I think it may be.

Issue is happening to me in Safari (desktop and mobile don't show the event listener in the inspector. Mobile also doesn't respond to the event).

Would you mind trying my reproducible example in Safari, please?

I opened this issue in Astro repo because trying the same thing in React + Vite works perfect (the event listener is added).

On top of that, adding the event via ref and addEventListener works well, so it really looks like an astro/jsx/esbuild/whatever_tool_that_astro_is_composed_of issue.

Let me know if I can provide more resources that may help investigate or reproduce the issue.

Thanks!

[vitorrloureiro]

UPDATE: I'm making some tests with real devices instead of the simulator and the issue is now inconsistent. I think it's possible that the problem is indeed on my side. I'll let you know.

After more research I realized React attaches event listeners to React root, not to the element themselves.

So in Astro's case the events are attached to . By itself this is is not a problem since a setup with Vite + React works fine.

The mystery for me right now is why Astro React output + Safari isn't working.

Also, super easy to reproduce. Just spawn an Astro project, create a React component with an onTouchStart listener and use Safari's Simulator (Command + Control + R then select an iOS device) and you'll see.
Or if you have an iPhone just pnpm dev --host it check on the phone.

I have a workaround for my own case right now (adding event listeners directly using ref) so please don't consider this post a support post. I'll keep on eye on this issue and will report back if I have new findings...

[vitorrloureiro]

Ok, I double checked everything in a real device and the issue is consistent. So again I'm tending to believe this is not on my side.

What I realized, though, is that after I add an event listener directly (via ref.current.addEventListener()) the onTouchStart event attached to the component starts to get passed as well. Super super weird.

It sounds to me like it could be related to the way hydration is happening... Is it possible?

[matthewp]

I'm not sure. This just seems very unlikely to be related to Astro. Please keep investigating and let us know.

[vitorrloureiro]

My argument for that being related to Astro comes from the fact that it doesn't happen when using Vite + React (without Astro). Also that it happens in every Astro template I tried (including "blank").

I'll understand if that's not enough and you rather close this issue (although in my opinion this is a rather serious bug). No worries.

If you think it's valid to investigate more:

Can you please check in your end (using Safari + simulator or an iOS device) if you have the same bug? (should be super quick to test. Like 3 minutes)

This way we can discard this is a problem on my end.

Thanks for the attention!