fix(select): click handlers on slotted content fire

[liamdebeasi]

Issue number: resolves #28818

---

What is the current behavior?

Select has logic in place to prevent the overlay from opening when clicking the slotted content. As part of this, we need to deal with the <label> element dispatching another click that then bubbles up and causes the overlay to open when clicking the slotted content. We currently deal with this by calling preventDefault which prevents this extra event from being dispatched only when clicking the slotted content.

We also call stopPropagation. This code is not necessary, and in most cases should not have any adverse effects on developer applications. However, this does impact React applications due to how React handles events. When a developer places onClick on a slotted element, a native "click" listener is not immediately applied to that element. Instead, React adds a native "click" listener to the root element of an application. When that listener's callback fires, React will dispatch a synthetic click event on the slotted element. Since we are calling stopPropagation, the click event never bubbles up to this root node's listener. As a result, the synthetic event is never dispatched on the slotted element, and the developed onClick callback never fires.

What is the new behavior?

• Select no longer prevents events from bubbling. The existing event.preventDefault is sufficient to prevent the label from dispatching another click (thereby causing the select overlay to open) when clicking the slotted content.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 7.6.5-dev.11705430252.1023daf3