bug(COMPONENT): Unexpected Behavior with Number Input and MatTooltip Scrolling

[armellarcier]

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

In Angular Material, when a with matInput is used, the expected behavior is that scrolling over this input field scrolls the page. However, if I hover over any element with MatTooltip, then focus back on the number input field, the scrolling behavior unexpectedly changes. Instead of scrolling the page, it increments or decrements the number in the input. This issue can also occur on the Angular Material official website.

This is not the expected behavior : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Reproduction

StackBlitz link: https://stackblitz.com/angular/porobbapdry?file=src%2Fapp%2Ftooltip-delay-example.ts
Steps to reproduce:

1. Navigate to a page with a with matInput.
2. Hover over an element with MatTooltip.
3. Focus on the number input field.
4. Try scrolling over the number input field.

Expected Behavior

The expected and consistent user experience is that scrolling over a number input field should scroll the page, not change the input's value. This unexpected behavior disrupts the user experience, especially in forms with tooltips and number inputs.

Actual Behavior

When a field with matInput is focused, and the user scrolls with the mouse wheel, the default behavior is for the page itself to scroll, not the number in the input field. However, this behavior changes after interacting with an element that has MatTooltip. Specifically, after hovering over a MatTooltip element and then focusing on the number input field, scrolling with the mouse wheel no longer scrolls the page. Instead, it changes the value in the number input field, incrementing or decrementing it. This is inconsistent with the expected behavior and occurs even on the Angular Material official website.

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): Chrome
• Operating System Windows + macOS + ArchLinux