I tried to implement the stop scrolling behavior on the kendo angular numeric textboxes via this sample

import { Directive, Input, Renderer2, SimpleChanges } from '@angular/core';
import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';

@Directive({
  selector: 'kendo-numerictextbox'
})
export class StopWheelDirective {
  @Input() stopWheel: boolean = false;
  private stopInputWheelFn: any;
  private stopSpinnersWheelFn: any;

  constructor(
    private host: NumericTextBoxComponent,
    private renderer: Renderer2
  ) { }

  ngAfterViewInit() {
    if (this.stopWheel) {
      this.stopWheelEvent();
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.stopWheel && !changes.stopWheel.firstChange) {
      if (changes.stopWheel.currentValue) {
        this.stopWheelEvent();
      } else {
        this.stopListeners();
      }
    }
  }

  ngOnDestroy() {
    this.stopListeners();
  }

  private stopWheelEvent() {
    const inputElement: HTMLElement = this.host.numericInput.nativeElement;
    const spinnersWrapperElement: HTMLElement = inputElement.nextElementSibling as HTMLElement;
    this.stopInputWheelFn = this.renderer.listen(
      inputElement,
      'wheel',
      event => {
        event.stopImmediatePropagation();
      }
    );
    this.stopSpinnersWheelFn = this.renderer.listen(
      spinnersWrapperElement,
      'wheel',
      event => {
        event.stopImmediatePropagation();
      }
    );
  }

  private stopListeners() {
    if (this.stopInputWheelFn) {
      this.stopInputWheelFn();
    }

    if (this.stopSpinnersWheelFn) {
      this.stopSpinnersWheelFn();
    }
  }
}

However I get this error on the page loading, and nothing is displayed on the form:

core.mjs:6485 ERROR TypeError: Cannot read properties of null (reading 'addEventListener') at DomEventsPlugin.addEventListener (platform-browser.mjs:738:17) at EventManager.addEventListener (platform-browser.mjs:270:23) at DefaultDomRenderer2.listen (platform-browser.mjs:658:34) at BaseAnimationRenderer.listen (animations.mjs:302:30) at StopWheelDirective.stopWheelEvent (stop-wheel.directive.ts:47:46) at StopWheelDirective.ngAfterViewInit (stop-wheel.directive.ts:19:12) at callHook (core.mjs:2542:1) at callHooks (core.mjs:2511:1) at executeInitAndCheckHooks (core.mjs:2462:1) at refreshView (core.mjs:9555:1)

CodePudding user response：

What you should do is setup the wheel event (documentation) of the NumericTextBox. Then in the event handler, call preventDefault.

Component's Template:

<kendo-numerictextbox (wheel)="onNumericTextBoxScroll($event)"></kendo-numerictextbox>

Component's Typescript:

onNumericTextBoxScroll(e: any): void {
  e.preventDefault();
}

Example: https://stackblitz.com/edit/angular-vavakj-cxlnvq?file=app/app.component.ts

CodePudding user response：

The example with a custom directive that toggles the NumericTextBox wheel event seems to be working as expected with the latest versions of the respective packages and theme:

https://stackblitz.com/edit/angular-8k8ozu?file=app/app.module.ts

However, since there is already a built-in option, it is recommended to use it instead:

https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/NumericTextBoxComponent/#toc-changevalueonscroll