Angular Material：悬停在 MatTooltip 上后数字输入滚动行为发生变化

Question

我正在使用 Angular 11 和 Angular Material。我在使用 matInput 的

<input matInput type='number'>

中遇到了意外的行为变化。通常，当我滚动此输入字段时，页面会滚动。但是，如果我将鼠标悬停在使用 MatTooltip 的任何元素上，然后重新关注数字输入字段，则滚动行为会发生变化：它不会滚动页面，而是会增加或减少输入中的数字。 Angular Material 官方网站上也出现此问题。

我希望数字输入字段保持一致的滚动行为，无论是否与 MatTooltip 交互。为了解决这个问题，我尝试了各种方法来防止数字更改并保持页面滚动。我的目标是确保滚动聚焦的数字输入字段始终会导致页面滚动，而不是更改输入值。

Answer 1

我使用自定义 Angular 指令解决了该问题，该指令覆盖数字输入字段的默认滚动行为。该指令监听鼠标滚轮事件，并且不允许数字更改，而是滚动页面。以下是它的实现和使用方式：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[scrollOverride]' 
})
export class ScrollOverrideDirective {

  @HostListener('wheel', ['$event'])
  onWheel(event: WheelEvent): void {
    event.preventDefault();
    window.scrollBy(0, event.deltaY);  // Manually handle the scrolling of the page
  }
}

该指令监听其所应用的元素上的“wheel”事件。当事件被触发时，它会阻止数字输入的默认行为并手动滚动页面。

使用此指令，滚动受 MatTooltip 影响的数字输入字段现在将导致页面滚动，而不是更改输入值。