ng-zorro-antd icon indicating copy to clipboard operation
ng-zorro-antd copied to clipboard

Notification close click triggering onClick

Open Supamiu opened this issue 2 years ago • 3 comments

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-ftgevt?file=src/app/app.component.ts

Steps to reproduce

  • Open notification by clicking the button
  • Click close icon on notification to close it
  • Check console log and status shown on the stackblitz

What is expected?

Console should display "onClose"

What is actually happening?

Console displays "onClick"

Environment Info
ng-zorro-antd 15.0.2
Browser Chrome

I used race in the reproduction template because it only consumes the fastest of the two observables to show that onClick emite before onClose, which makes sense when we check the template that's being used for notifications.

onClose listener (https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/notification/notification.component.ts#L72) being on a child element of onClick listener (https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/notification/notification.component.ts#L26), the event is sent to both when clicking the close button.

Adding $event.preventDefault() or $event.stopPropagation() on the onClose listener or in the close method call should fix the issue, preventing a close icon click from triggering the click event.

I'm using this notification to display a message that says "Your thing has been created, click here to open it" and when people click close, they're still being redirected, which is annoying for them.

Supamiu avatar Feb 17 '23 10:02 Supamiu

U

atifnimran avatar Feb 26 '23 17:02 atifnimran

I am also facing the same problem, did you able to find any solution? @Supamiu

Gopi-p avatar Apr 10 '24 10:04 Gopi-p

No, I should make a PR eventually

Supamiu avatar Apr 10 '24 12:04 Supamiu