Drop Down close issue

[Bharath0807]

trafficstars

Hello We are having two ng2-select one under the other. when we are focusing on second drop-down and at the same time focusing on the first one, second one is not closing. We want that second ng2-select to close automatically when we focus the first ng2-select if the second ng2-select in opened.

[blubberbo]

This looks like a duplicate of https://github.com/valor-software/ng2-select/issues/680

[Manny91]

Hello, I added a PR for that, I still waiting to be merged.. you might be able to fork it from my repo, but it would be nice to have a response about that PR

[gauzpan]

I also did a little workaround of my own, I created a (dropdownOpen) event which I listen to at my ng-select element component and call a function which will close all the other SelectComponent opened apart from the currently opened SelectComponent. I modified one function inside select.ts file like below to emit event :-

private open():void {
    this.options = this.itemObjects
      .filter((option:SelectItem) => (this.multiple === false ||
      this.multiple === true && !this.active.find((o:SelectItem) => option.text === o.text)));

    if (this.options.length > 0) {
      this.behavior.first();
    }
    this.optionsOpened = true;
    this.dropdownOpened.emit(true);
  }

In html I added event listener for (dropdownOpened)

<ng-select #elem (dropdownOpened)="closeOtherElems(elem)"
                [multiple]="true"
                [items]="items"
                [disabled]="disabled"
                [isInputAllowed]="true"
                (data)="refreshValue($event)"
                (selected)="selected($event)"
                (removed)="removed($event)"
                placeholder="No city selected"></ng-select>

This is my calling function on event trigger inside my component containg ng-select

  @ViewChildren(SelectComponent) selectElem :QueryList<SelectComponent>;

  public closeOtherElems(element){
   let a = this.selectElem.filter(function(el){
                  return (el != element)
            });

    a.forEach(function(e:SelectComponent){
      e.closeDropdown();
    })
  }

[saravanaselvan]

@Manny91 Thanks for the PR. I merged your change and it works well. For others - This is the PR link from Manny91 https://github.com/valor-software/ng2-select/pull/712/files

[Manny91]

@saravanaselvan Thank you! hopefully will help everyone who needs it

[iosifpetre18]

is there an official fix for this?

[iosifpetre18]

@gauzpan I also did a work around for this without modifying the SelectCompoenent:

in html: <ng-select #select1 (opened)="closeOtherSelects(select1)" [items]="items"> <ng-select #select2 (opened)="closeOtherSelects(select2)" [items]="items2">

in typescript: import { Component, OnInit, ViewChildren, QueryList } from '@angular/core'; import { SelectComponent } from "ng2-select/ng2-select";

@ViewChildren(SelectComponent) selectElements: QueryList<SelectComponent>;

public closeOtherSelects(element) { if (element.optionsOpened == true) { let elementsToclose= this.selectElements.filter(function (el: any) { return (el != element && el.optionsOpened == true) }); elementsToclose.forEach(function (e: SelectComponent) { e.clickedOutside(); }) } }

[Manny91]

@iosifpetre18 if you want to use it in your package json just do:

 {
 ....
"ng2-select-base": https://github.com/Manny91/ng2-select/tarball/close-on-click-outside
 }```

[optimistex]

Duplicate #913 It was fixed in that fork: https://github.com/optimistex/ng2-select-ex

[jesusreal]

Thanks a lot @gauzpan, @hucheng91 and @iosifpetre18 for the code you shared, it helped me a lot.