ng-zorro-antd
ng-zorro-antd copied to clipboard
Notification close click triggering onClick
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.
U
I am also facing the same problem, did you able to find any solution? @Supamiu
No, I should make a PR eventually