Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with ng-select stopping event propagation. #1169

Closed
bhaskerchari opened this issue May 13, 2019 · 0 comments
Closed

Problem with ng-select stopping event propagation. #1169

bhaskerchari opened this issue May 13, 2019 · 0 comments

Comments

@bhaskerchari
Copy link

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.

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):

  1. Please click on ngx-color-picker to open it.
  2. Now without clicking outside please try to open the ng-select dropdown which is right below the ngx-color-picker.
  3. 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.
  4. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants