useButton should accept and pass `continuePropagation` to the `usePress` hook.

[pedroapfilho]

Provide a general summary of the feature here

Pass continuePropagation to useButton, and pass it down to usePress, so the Buttons created with useButton can have events propagated to parents with the onPress.

🤔 Expected Behavior?

continuePropagation should be a prop for useButton, that should be passed to usePress

😯 Current Behavior

Currently there's no way to pass continuePropagation to the useButton, so it can be used by usePress.

💁 Possible Solution

I saw the implementation of useButton, and saw that it uses usePress, and that usePress has continuePropagation, but it's not used by useButton. so my proposal is to pass the continuePropagation to useButton and pass it down to usePress, so everything works as expected on these edge cases.

🔦 Context

We currently use the useButton to create part of our design system, and there are some cases when we use our button with other libraries eg: flexlayout-react, and the library expects the event to bubble to their own button, so the event can be triggered.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

You can actually call e.continuePropagation in the press event handlers you pass to useButton to accomplish this: https://codesandbox.io/s/autumn-glade-mlkdxp?file=/src/App.js. However I'd be careful doing this since relying on the event bubbling all the way though can be brittle, see #2100 for some discussion around this

[pedroapfilho]

It seems like continuePropagation is not part of the PressEvent type, is it intended?

[LFDanLu]

Thats odd, ButtonProps extends from

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

Lines 33 to 54 in 68af923

	export interface PressEvent {
	/** The type of press event being fired. */
	type: 'pressstart' | 'pressend' | 'pressup' | 'press',
	/** The pointer type that triggered the press event. */
	pointerType: PointerType,
	/** The target element of the press event. */
	target: Element,
	/** Whether the shift keyboard modifier was held during the press event. */
	shiftKey: boolean,
	/** Whether the ctrl keyboard modifier was held during the press event. */
	ctrlKey: boolean,
	/** Whether the meta keyboard modifier was held during the press event. */
	metaKey: boolean,
	/** Whether the alt keyboard modifier was held during the press event. */
	altKey: boolean,
	/**
	* 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
	}

which has it. Shows up locally for me as well as in the docs which get their props from the types: https://react-spectrum.adobe.com/react-aria/usePress.html#usage. Do you have a sample repro?

[pedroapfilho]

You're right, for some reason my editor wasn't auto-completing it, and I was blind to the property on the bottom. I'm sorry.

Just out of curiosity, why did you implement the e.continuePropagation on the onPressStart, and not on the onPress?

[LFDanLu]

No worries! The reason the e.continuePropagation is only on onPressStart is because if the user doesn't continue propagation onPressStart then the events gets stopPropagated at that point and won't propagate to the parent, meaning its too late to try to continuePropagation in onPress.

[pedroapfilho]

One fun fact is that integrating it with react-router-dom NavLink has some gotchas. It would be good to have some examples of both working together.