Функция углового выполнения два раза по событиям в Chrome

Question

У меня есть поле ввода, которое выполняет функцию в двух событиях на (blur) и другое на (keydown.enter), в обоих случаях функция сохраняет данные на сервере и переключает вход для <span>, теперь проблема в том, что на (keydown.enter) в firefox функция является триггерной, но в chrome функция запускается два раза, когда я должен быть только один.

Template

<input type="text" class="text-field"
  [(ngModel)]="column[item.id]" (blur)="setValue(nameInputDE, 'textDE', column)"
  (keydown.enter)="setValue(nameInputDE, 'textDE', column)"
  *ngIf="column.editModeNameDE && item.id == 'textDE'" #nameInputDE />

Component.ts

  public setValue(item, attr: string, col: KanbanColumn) {
    if (attr == 'myBoardColumnMapping' && item.id == col[attr]) {
      return;
    }
    this.log.trace('setValue(item: ' + item.id + ', attr: ' + attr + ', colID: ' + col.dataField + ')');

    let newVal;

    switch (attr) {
      case 'myBoardColumnMapping':
        col.myBoardColumnMapping = item.id;
        break;
      case 'text':
        col.text = item.value;
        break;
      case 'textDE':
        col.textDE = item.value;
        break;
      case 'wipLimit':
        col.wipLimit = item.value ? item.value : null;
        // if the value is invalid -> do not remove the input
        if (newVal < 1 || newVal > 100) {
          return;
        }
        break;
    }
    this.storeData(col);
  }

Пока я понятия не имею, как решить эту проблему, Firefox принимает только первое событие на входе в этом случае (keydown.enter), но Chrome принимает сначала (keydown.enter), а затем (blur), выполняя функцию два раза, любой Идея, как я могу избежать этого.

В случае создания директивы, которая прослушивает события, результат тот же, потому что в chrome оба события были запущены, chrome все еще выполняет функцию два раза.

Answer 1

Я создал грубый пример для stackblitz , который может показать вам, как этого добиться, используя rxjs для прослушивания события ввода нажатия клавиши и размытия, принимая только первое из этих событий.

Вы можете поэкспериментировать с этим, используя больше операторов фильтрации .

Общая логика:

  const listenToKeydownAndBlur = merge(
    fromEvent(this.theInput.nativeElement, 'keydown').pipe(
      filter((ev: any) => {
        return ev.code === 'Enter';
      }),
      tap(ok => {
        this.submitType = 'keydown enter event';
        console.log('keydown enter');
      })
    ),
    fromEvent(this.theInput.nativeElement, 'blur').pipe(
      tap(ok => {
        this.submitType = 'blur event';
        console.log('blur');
      })
    )
  ).pipe(
    first(),
    tap(ok => {
      this.submitted = true
      // Do submit logic!
    })
  )

  listenToKeydownAndBlur.subscribe();