stop focusin multiple times angular?

Question

The issue I am facing is that focusin events get triggered again sometimes on keydown. I would like to stop triggering again the focusin event again on keydown . Do you know how it can be possible? I have spent a lot of time on it. But I am not able to find any solution.

<input-editor
     [id]="cellId(element.rowId)"
     [value]="format(element)"
     (valueChanged)="quantityChanged($event, element)"
     (focusin)="focusedIn(element, editableCells.Checked)"
     (click)="$event.stopPropagation()"
            >
</input-editor>

Answer 1

I'm guessing it's because of focusin events of different children of input-editor. If so, the quickest way will be to add handler for focusout on the same form, and use a flag indicating whether editor has focus.

<input-editor
     [id]="cellId(element.rowId)"
     [value]="format(element)"
     (valueChanged)="quantityChanged($event, element)"
     (focusin)="focusedIn(element, editableCells.Checked)"
     (focusout)="focusedOut()"
     (click)="$event.stopPropagation()">
</input-editor>

inputEditorHasFocus: boolean = false;

//...

focusedIn(element, checked) {
    if (inputEditorHasFocus) {
        return;
    }

    inputEditorHasFocus = true;
// the rest of the implementation
}

focusedOut() {
    inputEditorHasFocus = false;
}

Or write a custom template directive and move handling the focus there, implementing its own focusIn, focusOut outputs. A neater, reusable solution, though with some more writing.