Bug: eagerly adding wheel events to app root opts into changing input type="number" value on scroll

[WickyNilliams]

React version: 17+

Steps To Reproduce

1. Render <input type="number" defaultValue={0} />
2. Focus input
3. Scroll mouse wheel over input

Link to code example: https://stackblitz.com/edit/react-wheel-event-number-input-mouse-wheel?file=src%2Fmain.tsx&terminal=dev

The current behavior

The value of the input changes when you scroll the mouse wheel over the number input. This behavior is only enabled in browsers if you add a wheel event to the input or an ancestor. React eagerly listens for a wheel event on the app's root, whether you use one in app code or not.

Therefore React is forcibly opting you into behavior that is undesirable and error-prone. There is no way to opt out. You must instead add a clunky workaround (that may not even work correctly because the events are passive).

This codepen demonstrates how you get opted into the behavior outside of a React context: https://codepen.io/WickyNilliams/pen/xbKyVQE

The expected behavior

The input's value should not change on mouse wheel, unless I have added an event listener explicitly. This aligns with actual browser behaviour outside of React