setPointerCapture() disables click events in Chrome

[MidnightDesign]

This line disables all click events inside the element, but only in Chrome.

I'm really sorry this is such a short ticket but I don't really have the time to create a reproducable case right now because my case is pretty involved, but I wanted to bring it up anyway. Please let me know if you need any additional information.

[jakearchibald]

Interesting! I think I currently assume that you're preventing default if you're returning true from the start callback, but I realise this isn't enforced.

A reduced test case would certainly help!

[MidnightDesign]

I actually do return true from the start callback. It's pretty much a copy of the PinchZoom custom element from Squoosh, but transformed into a React component.

Inside the pinchable element is an SVG (rendered by React) with rects with React click handlers on them. Maybe it's a problem with the click event not being propagated to the React root?

(By the way, I'm a big fan of HTTP 203. Keep up the amazing work!)

[jakearchibald]

Are you calling preventDefault too?

[MidnightDesign]

Yes, just like Squoosh.

[MidnightDesign]

If you're saying preventDefault() shouldn't be there: I've tried to remove it and it doesn't make a difference. The clicks still aren't registered.

[jakearchibald]

I think the fix will be to change:

this._element.setPointerCapture(event.pointerId);

To

event.target.setPointerCapture(event.pointerId);

Can you try that for me?

[MidnightDesign]

That works! Thank you so much. Should I open a PR?

[jakearchibald]

Yes please!

[MidnightDesign]

How should I handle the case where event.target is null? I would throw an error.

[jakearchibald]

Just to be safe:

(event.target || this._element).setPointerCapture(event.pointerId);