In its directive, when entering numbers, the cursor is first in the right place, but then jumps to the end?

Question

Angular

import { Directive, ElementRef, forwardRef, HostListener, Renderer2, Self } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[foDigitsOnly]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DigitsOnlyDirective),
      multi: true,
    },
  ],
})
export class DigitsOnlyDirective implements ControlValueAccessor {
  /** implements ControlValueAccessorInterface */
  _onChange: (_: any) => void;
  /** implements ControlValueAccessorInterface */
  _touched: () => void;
  private onlyDigitsRegexp: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*)?$/g);
  private specialKeys: string[] = ['Backspace', 'Delete', 'Enter', 'End', 'Home', 'ArrowRight', 'ArrowLeft'];

  constructor(@Self() private _el: ElementRef, private _renderer: Renderer2) {
  }

  @HostListener('keydown', ['$event'])
  public onKeyDown(event: KeyboardEvent): void {
    if (
      this.specialKeys.indexOf(event.key) !== -1
      || event.ctrlKey === true
      || event.metaKey === true
      || event.key && event.key.toLowerCase() === 'insert'
    ) {
      return;
    }

    const currentValue: string = this._el.nativeElement.value;
    let position: number = this._el.nativeElement.selectionStart;
    let nextValue: string = [currentValue.slice(0, position), event.key, currentValue.slice(position)].join('');
    if (nextValue && nextValue.match(this.onlyDigitsRegexp)) {
      this.updateValue(nextValue);
    }
    event.preventDefault()
  }

  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent) {
    event.preventDefault();

    const value = event.clipboardData
      .getData('text/plain')
      .replace(/\D/g, '');

    this.updateValue(value);
  }


  @HostListener('drop', ['$event'])
  onDrop(event: DragEvent) {
    event.preventDefault();

    const value = event.dataTransfer
      .getData('text')
      .replace(/\D/g, '');

    this.updateValue(value);
    this._el.nativeElement.focus();
  }

  @HostListener('input', ['$event'])
  onInput(event: any) {
    event.preventDefault();

    const value = event.target.value
      .replace(/\D/g, '');

    this.updateValue(value);
    this._el.nativeElement.focus();
  }

  @HostListener('blur')
  onBlur(): void {
    this._touched && this._touched();
  }

  /** Implementation for ControlValueAccessor interface */
  writeValue(value: any): void {
    this._renderer.setProperty(this._el.nativeElement, 'value', value);
  }

  /** Implementation for ControlValueAccessor interface */
  registerOnChange(fn: (_: any) => void): void {
    this._onChange = fn;
  }

  /** Implementation for ControlValueAccessor interface */
  registerOnTouched(fn: () => void): void {
    this._touched = fn;
  }

  private updateValue(value: any): void {
    this.writeValue(value);
    this._onChange && this._onChange(value);
  }
}

Hello everybody. Wrote my custom directive. The situation is this: I first enter some value, for example 1111, then I put the cursor between the second and third unity, I enter 2, I want to enter 22, but when I enter the second two, the cursor jumps to the very end.