Ng2-select: Dropdown not closed on click outside of ngSelect

[lexith]

I have the problem, that the Dropdown does not close if i click outside the directive.
So basically i'm forced to select a value and delete it afterwards.

It doesn't matter if i have one or multiple ngSelects in my view.

I'm using the "multiple" type.

Any hints?

[NisStrom]

Yes this should be fixed as soon as possible. I created a pull request for that:

251

[faizan-ali]

This is still an issue

[qoopa]

I halso have this issue when using 'multiple'.

Does anyone have a workaround in the meantime?

[jamiec1234]

Any further work on this issue? Or any work arounds?

[jasonkrot]

The problem still exists. I just installed the plugin via npm, latest chrome on win10. The normal select also has this issue.

[ghost]

This is stil an issue. Any work around for this?

[meppiel]

I recently ran into the same issue, but only when running my app on iOS. For some reason the click event was not firing when a user had a ng2-select dropdown open and they clicked outside of it. As a temporary workaround, here's what I did:

• Installed hammerjs and hammer-timejs

• Imported both into my app.module.ts

• In my component.html, I added both a tap and a press event to my container

<div class="container" (tap)="checkDropdowns($event)" (press)="checkDropdowns($event)">

• Then in my component.ts, I simply checked the event's target to see if something outside of the ng2-select was clicked. If so, I just triggered the clickedOutside method:

` checkDropdowns(event: any): void {

var className = event.target.className.toLowerCase();

if (className.indexOf('ui-select') > -1) {
  console.log('Something inside ng2-select was clicked');
  return;
}

if (event.target.parentElement && event.target.parentElement.parentElement) {
  className = event.target.parentElement.parentElement.className.toLowerCase();
  if (className.indexOf('ui-select') > -1) {
    console.log('A ng2-select option was clicked');
    return;
  }
}

let elementsToclose = this.selectElements.filter(function (el: any) {
  return el.optionsOpened == true;
});

elementsToclose.forEach(function (e: SelectComponent) {
  e.clickedOutside();
})

}`

It's ugly, but it works. :)