menu

Questions & Answers

keyup.enter/space event triggers multiple times on "@fortawesome/angular-fontawesome" icon / Angular 6 project

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.

Comments:
2023-01-18 10:42:05
I can't reproduce this: stackblitz. But note that in the example icon is losing focus on keyup.enter. So if that's indeed your issue, it must be caused by some part of your code you didn't share. I guess it should be easy to programmatically remove focus from within your onDeleteIconClick function anyway.
2023-01-18 10:42:05
Is something preventing you from using an actual <button> around the icon? You wouldn’t even need to bind keyboard handlers then. Currently, your icon is missing a role="button" as well, and an accessible name.
2023-01-18 10:42:05
actually, on the modal, when the user selects Yes or No it should remove the focus from delete/thrash icon.
Answers(0) :