javascript - Autoclose dropdown menu problem with ng-select - Stack Overflow

admin管理员组

文章数量:1279112

I'm trying to create a dropdown menu, that closes automatically when the user click outside of it. In this menu I added a ng-select ponent, but when I click on one of the options, the menu will close, because the dropdown panel of the ng-select is not inside the DOM when it is closed, is there any way to achieve what I want? The dropdown menu to not close when the user select a ng-option? Here there is an example of the problem: ponent.ts

Here is the code that I use to keep track of the click of the user:

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father identify the container of the dropdown menu.

I'm trying to create a dropdown menu, that closes automatically when the user click outside of it. In this menu I added a ng-select ponent, but when I click on one of the options, the menu will close, because the dropdown panel of the ng-select is not inside the DOM when it is closed, is there any way to achieve what I want? The dropdown menu to not close when the user select a ng-option? Here there is an example of the problem: https://stackblitz./edit/angular-8m1ta5?file=src%2Fapp%2Fapp.ponent.ts

Here is the code that I use to keep track of the click of the user:

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father identify the container of the dropdown menu.

• javascript
• angular
• angular-ngselect

Share Improve this question Follow edited Oct 23, 2021 at 14:11 Vega 28.7k2828 gold badges120120 silver badges145145 bronze badges asked Feb 21, 2020 at 10:18 Davide QuaglioDavide Quaglio 77122 gold badges1212 silver badges3131 bronze badges 1

• Please do not add answers in the question post – Vega Commented Oct 23, 2021 at 14:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The Attribute [closeOnSelect]="false" should do the work. You will have to add it to the <ng-select> tag

So, from the stackblitz the code will bee:

<ng-select placeholder="Status" [closeOnSelect]="false">
        <ng-option [value]="'0'">Option 1</ng-option>
        <ng-option [value]="'1'">Option 2</ng-option>
        <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

Here you can find the documentation https://github./ng-select/ng-select

You can use the property called [closeOnSelect]=true with ng-select, and you can pass the value as well.

binding the isOpen property of ng-select to your ponents dropdown flag should do the trick:

<ng-select placeholder="Status" [isOpen]="dropdown">
    <ng-option [value]="'0'">Option 1</ng-option>
    <ng-option [value]="'1'">Option 2</ng-option>
    <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

ponent.ts

export class AppComponent  {
  dropdown = false;

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event'])
  public onClick(e) {
    const clickedInside = this.father.nativeElement.contains(e.target);
    if (!clickedInside) {
      this.dropdown = false;
    }else{
      this.dropdown=true;
    }
  }
}

have a look at https://github./ng-select/ng-select#inputs

I have altered your stackblitz

for <ng-select> has the [closeOnSelect]=false property added, it won't close after each item is selected, which is useful for selecting multiple items at once.

Example:

<ng-select formControlName="country" [items]="countries" bindValue="code" bindLabel="name" [multiple]="true" placeholder="Select Country" [searchable]="true" [clearable]="true" [virtualScroll]="true" [closeOnSelect]="false">

本文标签： javascriptAutoclose dropdown menu problem with ngselectStack Overflow