Questions & Answers

In my angular 6 application, there is fort awesome icon as below:

<div>
   <fa-icon [icon]="trashIcon" class="custom-trash-icon" tabindex="0"
     (click)="onDeleteIconClick()"  (keyup.enter)="onDeleteIconClick()"  
     (keyup.Space)="onDeleteIconClick">
  </fa-icon>
</div>

in .ts file, it opens a NgbModal modal window for deletion confirmation, and if a user presses 'yes' or 'no' button, it is aimed to delete the selected resource asynchronously, However since the focus from the trash icon is not moving it keeps popping up the modal window again and again on 'enter' or 'space' keys, however, it is working well on Click event through the mouse.

.ts file code

public onDeleteIconClick() {
        
        const modalRef = this._modalService.open(DeleteComponent, {
            backdrop: "static",
            windowClass: "custom-modal",
            keyboard: true,
            centered: true,
        });
        modalRef.componentInstance.confirmationText = `Do you want to delete the resource?`;
        modalRef.result.then(
            (result) => {
                if (result && result.toLowerCase() === "yes")
                 {
                         this.deleteResource.emit();
                   
                }
            },
            (reason) => { }
        );

    }

I believe that is because the focus is not moving from the thrash icon, did any encounter a similar issue?

Please note that keyup.enter, keyup.enter events are targeted for accessibility purposes.