Search code examples
htmlangularangular-materialdropdownmulti-select

"onDropDownClose" event is getting triggered all time even if I click any where else other than the drop down in ng-multiselect-dropdown


I am using ng-multiselect-dropdown,and I have to load the data based on the selected list. Hence,I am using "onDropDownClose" event to get all the selected values and load the other data based on the selected multiple values.

   <ng-multiselect-dropdown
   [placeholder]="'Select Project'"
   [settings]="dropdownSettings"
   [data]="projects"
   [required]='requiredField' 
   [(ngModel)]="selectedItems"
   name="projectName"
   [ngClass]='setClass()'
  #projectName="ngModel"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)" 
  (onDropDownClose)="saveFunction($event)">

But the close event is triggering all the time even I click outside the dropdown always. Is there any alternate approach it? Please help.


Solution

  • This should be fixed at their end but until then you can use this trick: In addition to (onDropDownClose), listen to a click event on ng-multiselect-dropdown

     // this act as a differentiator between other calls(bug) and an intended call
     (click)="dropDownSelect = true".
    

    In your component, declare your variable and use it like this:

    dropDownSelect = false;
    
    saveFunction($event) {
     if (this.dropDownSelect) {
            // close the opening to subsequent actions 
            this.dropDownSelect = false;
            // Perform action;
     };
    }