When clicking on ng-select, can't do stopPropagation to parent element

[naharyd]

Hi,

I have the following senario:

<div class="parent" (click)="onClick($event)">
   <ng-select
              [options]="options"
              (selected)="onItemSelected($event)">
   </ng-select>
</div>

I want to prevent onClick from being called each time I open/close ng-select dropdown.

I try to add (click) handler on 'ng-select' and call stopPropagation but it will not close the dropdown since it's listening to window.click.

Can you please advise?

[naharyd]

My work around to fix this issue: use open/close API. I would recommend to add it to your documentation.

Still, this isn't the elegant approach.

[basvandenberg]

I am sorry, but I don't exactly understand what you are trying to achieve. You want onClick of "parent" not to be called when clicking ng-select? It would help if you could explain why you want that, then I might think of another solution.

[naharyd]

Hi,

My parent is a row in table. When I'm clicking on a row I will navigate me to new page which contains more details about this row. On the tag element I have onClick.

One cell of this row is select component (drop down), When clicking on select component it will trigger also onClick row (because of bubbling behavior) and will navigate me to new page.

What is your advise to solve this behavior?

[bchampion]

Hi, I have a similar issue. The ng-select is in a form :

<form (ngSubmit)="search()" [formGroup]="myForm"
   <ng-select [options]="options" formControlName="theSelectedOption">
   </ng-select>
   ...
</form>

When I use the key 'enter' the form is submited witch is annoying because there is other formcontrols.

@naharyd I would be interested about your workaround can you give an exemple?

[naharyd]

Hi @bchampion ,

I did something like this:

<ng-select #select 
                   [options]="options"
                   (click)="onClick($event)"
                   (opened)="opened()"
                   (selected)="onSelected($event)"
                   formControlName="theSelectedOption">
   </ng-select>

ts:

@ViewChild('select') select: SelectComponent;

onSelected(selectedItem:IOption){
    this.isOpened = false;
   ...
}

opened(){
    ....
    this.isOpened = true;
}

onClick($event:Event){
    $event.stopPropagation();
    if (!this.isOpened){
      this.select.close();
    }
}

[basvandenberg]

@naharyd The reason that I do not stop the propagation of the click event is that there might be other components as well with a window.click event listener. For example to have a drop down closed, as this component does. I am not sure if it is the 'default' behavior to not stop click propagation, but I thought it makes sense.

Would it be possible to check what element is clicked in your table row click handler? And then only navigate to the other page if the target of the click event was not the ng-select component?

@bchampion You could try this if you want to disable submit on enter as a work around. In contrast to the click event, I think the ng-select should stop the propagation of the enter key to resolve this issue. I can't think of any reason why somebody would need the propagated enter key event.

[naharyd]

Hi @basvandenberg ,

First of all, thank you for your comment.

In my scenario, I have event listener on row level. Your suggestion will force me to put click event listener on each cell in my row, except ng-select component and that will be a bad practice.

Maybe if ng-select was sending event click object when triggering selected event I could use your advice.

another option to solve this issue could be appendToBody. now because we don't have appendToBody or receiving event click object, I use my workaround.

Thanks

[Quentigus]

Hello, I've the same issue with an ng-select within a ngx-bootstrap's popover [outsideClick]="true" (https://valor-software.com/ngx-bootstrap/#/popover#outside-click)

On option selection, the popover is automaticly closed. Having event returned into selected event will allow us to stop propagation.

Thanks

[brucepc]

Hi, I've the same issue, to workaround i did it:

<ng-select (click)="$event.stopImmediatePropagation()"></ng-select>

Thanks

[rmcsharry]

Thanks @brucepc but that didn't work for me.

as @Quentigus stated, we need the event to be sent when selected changes, then we can simply call

event.stopPropagation()

from our selected handler

EDIT

I tried (click)="$event.stopPropagation()" on the ng-select, which worked, but clicking the actual options continued to bubble up.

However, I discovered that this was ONLY if I have a select that is encased inside an ngIf. Once I changed the ngIf to just apply display: hidden when I didn't want it appearing, the events from clicking the options also did not bubble.

So it seems that if the entire select is rendered dynamically (ie. not immediately upon component load/render) this problem occurs. That could explain why in a table of data that is loaded, it happens, and in a popover, it happens.