Open
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
The fix for #29074 added a passive wheel
listener to every <input matInput type="number">
.
Because Blink & WebKit treat the mere presence of a listener as opt-in, this forces mouse-wheel value-spinning everywhere, even when the user just wants to scroll the page.
Why this is problematic :
- Inconsistent UX — Firefox disabled wheel-spin in 2023; WebKit is removing it; WHATWG #10911 discusses dropping it entirely. We now ship a behaviour that only some engines still support.
- Hard to opt out — apps that prefer native behaviour must add custom directives just to undo the framework’s side-effect.
- Questionable default — wheel-spin is widely regarded as error-prone; many design systems leave it off unless the app explicitly opts-in.
- Big change for a small bug — the original issue surfaced only after a tooltip attached its own wheel listener; solving that by adding another listener to every number input feels disproportionate.
Proposal
- Remove the automatic wheel listener from MatInput.
- Re-open bug(COMPONENT): Unexpected Behavior with Number Input and MatTooltip Scrolling #29074 and fix it at the tooltip level (e.g. use a scroll listener or attach wheel outside the event path of inputs).
- If needed, expose an opt-in flag like enableWheelIncrement for teams that really want the legacy behaviour.
This restores native defaults, keeps Material aligned with browser evolution, and lets developers choose the experience that fits their users.
Reproduction
- Open any Angular Material form that contains
<input matInput type="number">
in Chrome (Blink) - Focus the field, keep the cursor over it, and spin the mouse-wheel.
- Actual result: the numeric value increments or decrements.
Expected: per MDN / HTML guidance, the wheel should scroll the page unless the site explicitly opts-in. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number - Repeat the same steps in Firefox (Gecko).
- Result: the value does not change; only the page scrolls.
Expected Behavior
On all modern browsers, the value does not change; only the page scrolls.
Actual Behavior
The automatic wheel listener makes Angular Material inputs behave differently across browsers and diverge from the default behaviour that modern engines are converging toward.
Environment
- Angular: 19
- CDK/Material: 19
- Browser(s): Chrome / Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS