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

[ChristophWieske]

The issue comes from the wheel event that the tooltip uses to get a proper trigger to hide again. However there is an issue with the wheel event in chromium: https://issues.chromium.org/issues/334994023

Test it yourself: https://stackblitz.com/edit/stackblitz-starters-yjt7dn?file=index.html

Last info from the chromium team was: Won´t Fix.

I think removing the wheel handler after the tooltip hid could reduce the impact of the issue. However the user would still experience the changed behavior while the toolip is open (due to delay or when it is attached directly to the input)

We could add a wheel handler on matInput[type=number] per default
--> The behavior would consistently stay increment/decrement

If that is a suitable solution I would prepare a pull request for that. Is it a suitable solution?

(Firefox always shows increment/decrement behavior)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}