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

[dholbert]

Adding two bits of nuance, for completeness & to clear up some possible-future-confusion if a long time happens to pass before someone looks at this:

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.

(1) This browser behavior (where number-field-mutability-with-scrollwheel depends on having a wheel event listener) is specific to Chromium/WebKit and it's not an intentional relationship -- this was a bug in Chromium & WebKit which they both inadvertently introduced as part of hardware-accelerated scrolling (where they were using which-areas-of-the-page-have-wheel-listeners as a switch for whether wheel events would have any effect at all). We at Mozilla suggested possibly standardizing this as an official "opt-in" mechanism (to reflect reality and remove interop pain) in whatwg/html#10911, but this react quirk currently would make that a bit more difficult since all react apps would be opted in -- and in any case, now it's looking like browsers may all just remove the number-field-mutability-with-scrollwheel across the board, instead of standardizing on an opt-in.

(2) Firefox has already removed number-field-mutability-with-scrollwheel behavior entirely in Firefox 130 (in https://bugzilla.mozilla.org/show_bug.cgi?id=1741469 ) and WebKit recently merged a patch to remove that behavior as well ( WebKit/WebKit#39382 ), and perhaps Chromium will soon too.

Anyway: independent of those^ points, it's still worth considering whether this event listener make sense and perhaps take action here.

[WickyNilliams]

Thanks Daniel, appreciate you including the extra context