You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
Why ng-select is stopping event propagation? From the library source code in ng-select.component.ts I can see the below function which handled mousedown event and it clearly stops event propagation for some reason which I am not fully aware.
handleMousedown($event: MouseEvent) {
const target = $event.target as HTMLElement;
if (target.tagName !== 'INPUT') {
$event.preventDefault();
}
$event.stopPropagation();
if (target.classList.contains('ng-clear-wrapper')) {
this.handleClearClick();
return;
}
if (target.classList.contains('ng-arrow-wrapper')) {
this.handleArrowClick();
return;
}
if (target.classList.contains('ng-value-icon')) {
return;
}
if (!this.focused) {
this.focus();
}
if (this.searchable) {
this.open();
} else {
this.toggle();
}
}
But by stopping the propagation it won't give any opportunity for some other elements who are interested to listen for the same event when the event is bubbling and may lead to undesirable results such as any overlay elements which are active doesn't close and I am going to talk about one such example or issue with ngx-color-picker.
To Reproduce
Steps to reproduce the behavior (if example is not provided):
Please click on ngx-color-picker to open it.
Now without clicking outside please try to open the ng-select dropdown which is right below the ngx-color-picker.
Notice that the color picker dropdown doesn't close when you try to click on ng-select to open it. Also notice that color picker dropdown won't close even after you make any item selection.
The problem is ngx-color-picker also listens on the same mousedown event to close the colorpicker dropdown if it's opened. Since ng-select is stopping event propagation so ngx-color-picker is not receiving the event and not closing the color picker dropdown.
Expected behavior
I believe event propagation should not be stopped forcefully and it should be probably configurable to turn it on or off otherwise some elements who are interested may not receive events and may not work as intended.
The text was updated successfully, but these errors were encountered:
Describe the bug
Why ng-select is stopping event propagation? From the library source code in ng-select.component.ts I can see the below function which handled mousedown event and it clearly stops event propagation for some reason which I am not fully aware.
handleMousedown($event: MouseEvent) {
const target = $event.target as HTMLElement;
if (target.tagName !== 'INPUT') {
$event.preventDefault();
}
$event.stopPropagation();
But by stopping the propagation it won't give any opportunity for some other elements who are interested to listen for the same event when the event is bubbling and may lead to undesirable results such as any overlay elements which are active doesn't close and I am going to talk about one such example or issue with ngx-color-picker.
Reproducbile example
https://stackblitz.com/edit/github-hph3aa-5a42k1?file=src/app/app.component.html
To Reproduce
Steps to reproduce the behavior (if example is not provided):
Expected behavior
I believe event propagation should not be stopped forcefully and it should be probably configurable to turn it on or off otherwise some elements who are interested may not receive events and may not work as intended.
The text was updated successfully, but these errors were encountered: