onClick cannot be triggered using continuePropagation

[Ciavarella]

Provide a general summary of the issue here

onClick should be able to be triggered on parent but it is not, calling the e.continuePropagation does not change the parent onClick to be able to be triggered.

🤔 Expected Behavior?

onClick should be able to be triggered on parent

😯 Current Behavior

onClick is not triggered on parent when clicking a child onPress or onPressStart with continuePropagation.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/pensive-monad-vp8yp2?file=%2Fsrc%2FApp.js%3A25%2C17

Version

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[sookmax]

onClick is not triggered on parent when clicking a child onPress or onPressStart with continuePropagation.

As far as I can tell, only PressEvent handlers of the parent (a 'pressable' component, using usePress()) see the propagated event when PressEvent.continuePropagation() is called in the child (again, a 'pressable' component, using usePress()):

react-spectrum/packages/@react-aria/interactions/test/usePress.test.js

Lines 2896 to 2921 in b2c9961

	it('should allow propagation if continuePropagation is called', () => {
	let outerPressMock = jest.fn();
	let innerPressMock = jest.fn().mockImplementation(e => e.continuePropagation());
	let res = render(
	<Pressable
	onPressStart={outerPressMock}
	onPressEnd={outerPressMock}
	onPress={outerPressMock}
	onPressUp={outerPressMock}>
	<Pressable
	data-testid="test"
	onPressStart={innerPressMock}
	onPressEnd={innerPressMock}
	onPress={innerPressMock}
	onPressUp={innerPressMock}>
	inner
	</Pressable>
	</Pressable>
	);
	let el = res.getByTestId('test');
	start(el);
	end(el);
	expect(outerPressMock.mock.calls).toHaveLength(4);
	expect(innerPressMock.mock.calls).toHaveLength(4);
	});

The description of continuePropagation() also seems to say a similar thing:

react-spectrum/packages/@react-types/shared/src/events.d.ts

Lines 48 to 53 in b2c9961

	/**
	* By default, press events stop propagation to parent elements.
	* In cases where a handler decides not to handle a specific event,
	* it can call `continuePropagation()` to allow a parent to handle it.
	*/
	continuePropagation(): void

[Crustan]

onClick is not triggered on parent when clicking a child onPress or onPressStart with continuePropagation.

As far as I can tell, only PressEvent handlers of the parent (a 'pressable' component, using usePress()) see the propagated event when PressEvent.continuePropagation() is called in the child (again, a 'pressable' component, using usePress()):

This is a major issue since you might have third-party libraries that apply event listeners on wrapping components, that ain't a PressEvent (like MouseEvent), expecting the event to propagate.

Right now it's impossible to prevent the propagation from being stopped in those cases which totally breaks the other library, in our case, hotjar (https://help.hotjar.com/hc/en-us/articles/7053232973975-Heatmap-Data-Troubleshooting).

[staticshock]

Related: I'm seeing this in the context of a Checkbox, where a press (combined with continuePropagation) sometimes makes it through to the parent component when using tap-to-click on a trackpad, but not consistently. Tap-to-click the "Test" button a bunch of times here and eventually you'll see a state change:

https://codesandbox.io/p/sandbox/trusting-night-9q9824

Screen.Recording.2024-05-01.at.1.28.28.PM.mov