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

Question

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.

Edit***************

Here is the stackblitz, wherein once u click on the trash icon and when it opens up the modal window, click on cancel using enter key of the keyboard, please notice that the modal window will keep appearing.

I can't reproduce this: [stackblitz](https://stackblitz.com/edit/hello-angular-6-t3s9k1). 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. — lbsn, Jan 18 '23 at 09:54
actually, on the modal, when the user selects Yes or No it should remove the focus from delete/thrash icon. — Dev Developer, Jan 18 '23 at 10:40
@lbsn, on your [stackblitz.](https://stackblitz.com/edit/hello-angular-6-p8tjg8?file=src%2Fapp%2Fapp.component.ts)., when u click on thrash icon and when u click on cancel button on modal window using enter key from keyboard, the modal window keeps coming, that is what my issue is. — Dev Developer, Jan 18 '23 at 10:45
@lbsn, did you managed to look at [stackoverflow](https://stackblitz.com/edit/hello-angular-6-p8tjg8?file=src%2Fapp%2Fapp.component.ts) — Dev Developer, Jan 18 '23 at 14:29

score 1 · Accepted Answer · answered Jan 18 '23 at 16:47

1

The best solution (as suggested in Andy's comment) is to use a <button> and remove keybord bindings at all:

<button type="button" (click)="onDeleteIconClick()">
   <fa-icon [icon]="trashIcon" class="custom-trash-icon" tabindex="0">
   </fa-icon>
</button>

If for some reason you want to stick with your current template, you could pass the event object to onDeleteIconClick() and remove the focus from within the function:

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

// TS
onDeleteIconClick(ev) {
   ev.currentTarget.blur();      
   // ...
}

answered Jan 18 '23 at 16:47

lbsn

2,322
1
11
19

Though I found a similar approach by seeing your example and it worked for me but, @lbsn, when I am using event.currentTarget.blur(), throws an error 'Cannot read properties of null (reading 'blur') ' – Dev Developer Jan 19 '23 at 04:56
As stated in the answer, the best solution is to use a button element. That being said `event.currentTarget` [might indeed be null](https://stackoverflow.com/a/66086044/8389583). From what you posted I can't guess why this happens in your code, you can try and add a null check anyway. – lbsn Jan 20 '23 at 10:29

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

1 Answers1