Button with endEnhancer onClick issue

Current Behavior

I have a Button which has an endEnhancer, to show an icon. The button has an onClick event to update a state. If I click the button itself, then it will set the value of the Button no problem.

If I click the endEnhancer icon, then it will still run the onClick event from the button, but it the value will be undefined.

What is the correct use of this combo or is there a bug when using an endEnhancer? Should it not inherit the value of the button, if it inherits the onClick event?

Here’s a demo with an alert. Try clicking the button and precisely on the icon: https://codesandbox.io/s/button-with-endenhancer-doxgi

Expected Behavior

That clicking the button itself or the endEnhancer produces the same event / outcome.

Your Environment

Tech	Version
Base UI	v8.6.1
React	16.8.2
browser	Chrome 75.x

• I have searched the issues of this repository and believe that this is not a duplicate.

[sandgraham]

This is how event capturing & bubbling works by default in the browser.

I don’t think we should change/hide this behavior. There may be legitimate use cases for allowing normal event capturing within an enhancer (a nested checkbox perhaps). The onClick still has context on which button was clicked so I don’t think this behavior limits folks. If you do need to grab something from the button element instance related to the event, you can always use the event object to grab the parent element or use a ref.

While I don’t think the actual event should be altered/hidden, the onChange handler itself might pass additional arguments that could be useful. We don’t have to only pass events.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. If it’s still valid, please remove the stale label or comment on the issue, otherwise this ticket will be closed in 5 days