Skip to content

bug(matInput): drop automatic wheel listeners on number inputs #31372

Open
@zerbusdetroy

Description

@zerbusdetroy

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

  1. Remove the automatic wheel listener from MatInput.
  2. 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).
  3. 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

  1. Open any Angular Material form that contains <input matInput type="number"> in Chrome (Blink)
  2. Focus the field, keep the cursor over it, and spin the mouse-wheel.
  3. 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
  4. Repeat the same steps in Firefox (Gecko).
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions