Skip to content

Conversation

ChristophWieske
Copy link
Contributor

In blink and webkit browsers the default behavior of increasing or decreasing a focused number input on wheel events is broken until a wheel event listener is explicitly added.

Fixes #29074

@ChristophWieske ChristophWieske requested a review from a team as a code owner July 17, 2024 18:31
@ChristophWieske ChristophWieske requested review from crisbeto and andrewseguin and removed request for a team July 17, 2024 18:31
@ChristophWieske
Copy link
Contributor Author

Tried to add a test as well, but wasn´t able to trigger the inputs default wheel behavior with dispatched events. I assume it only works with trusted events.

Added a section to the dev app that shows the scenario that triggered the issue (number input + tooltip).

// For example: Hitting a tooltip once enables the mouse wheel input for all number inputs as long as it exists.
// In order to get reliable and intuitive behavior we apply a wheel event on our own
// thus making sure increment and decrement by mouse wheel works every time.
if (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider moving this out into a private method since the setter is getting pretty big.

this._type === 'number' &&
(this._platform.BLINK || this._platform.WEBKIT)
) {
this._elementRef.nativeElement.addEventListener('wheel', this._WebkitBlinkWheelListener);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we bind this outside the NgZone?

@@ -527,4 +551,10 @@ export class MatInput
el.setSelectionRange(0, 0);
}
};

private _WebkitBlinkWheelListener = (): void => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The naming of this will likely trigger a lint warning.

@ChristophWieske
Copy link
Contributor Author

@crisbeto I applied your feedback and fixed linter errors. Have a look.

@crisbeto crisbeto removed the request for review from andrewseguin July 19, 2024 06:58
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jul 19, 2024
@crisbeto
Copy link
Member

@ChristophWieske you need to run yarn approve-api input and commit the changed file in order for the CI to pass.

In blink and webkit browsers the default behavior of increasing or decreasing a focused number input on wheel events is broken until a wheel event listener is explicitly added.

Fixes #29074
@angular-robot angular-robot bot requested a review from crisbeto July 19, 2024 10:39
@crisbeto crisbeto merged commit 10da6c6 into angular:main Jul 19, 2024
8 of 10 checks passed
crisbeto pushed a commit that referenced this pull request Jul 19, 2024
…29449)

In blink and webkit browsers the default behavior of increasing or decreasing a focused number input on wheel events is broken until a wheel event listener is explicitly added.

Fixes #29074

(cherry picked from commit 10da6c6)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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