Press events are not dispatched correctly on iOS Chrome/Safari

[hnordt]

🐛 Bug Report

Press events are not dispatched correctly on iOS.

I've created a Button component with the useButton hook and I noticed press events are not dispatched correctly (but click events are) on iOS Chrome/Safari (I didn't test on Android) if you click in any of the Button edges. It works on desktop though.

🤔 Expected Behavior

useButton / usePress should dispatch press events every time a click event would be dispatched.

😯 Current Behavior

Screencast showing the problem on Chrome iOS: https://d.pr/v/5haGuQ

💻 Code Sample

Codesandbox link: https://codesandbox.io/s/sad-meitner-ssc9k

🌍 Your Environment

Software	Version(s)
@react-aria/button	3.2.1
Browser	Chrome 85.0.4183.92
Operating System	iOS 13.6.1

[hnordt]

I was able to reproduce the same issue by using Chrome's desktop built-in mobile emulator:

Screencast: https://d.pr/v/b5dY6k

[devongovett]

Interesting. Maybe iOS is doing some kind of fuzzy hit testing? Like where you hit within some margin of the button it still fires? But it must not do that for pointer/touch events.

[hnordt]

From my understanding when using pointer events for mobile browsers the center of the finger press should be within the button area, otherwise the event will not fire. 🤔

[devongovett]

Yeah that's what I assumed. I guess we'd have to implement our own hit test padding if we wanted to support this. That would likely be a big task since we don't currently implement our own global hit testing and rely on e.g. onPointerDown firing on the button element itself...

[hnordt]

@devongovett I’ve showed the issue to @diegohaz and he thinks the issue might be caused by

react-spectrum/packages/@react-aria/interactions/src/usePress.ts

Lines 641 to 647 in b8e7a96

	function isOverTarget(point: EventPoint, target: HTMLElement) {
	let rect = target.getBoundingClientRect();
	return (point.clientX || 0) >= (rect.left || 0) &&
	(point.clientX || 0) <= (rect.right || 0) &&
	(point.clientY || 0) >= (rect.top || 0) &&
	(point.clientY || 0) <= (rect.bottom || 0);
	}

[devongovett]

Is onPressStart fired? isOverTarget isn't used in onPointerDown

[hnordt]

Yes; onClick, onPressChange, onPressStart and onPressEnd are fired but not onPress.

[ktabors]

This project is not something we are able to take on at this time. We are happy to work with anyone interested in contributing this improvement.