onDropDownClose is called much more than expected

[Karolis92]

There is no documentation on how this should work, but I would expect other behavior.
When (onDropDownClose)="close()" is used, close() is called not only when dropdown is closes, but also every time mouse is clicked anywhere else except component.

https://stackblitz.com/edit/angular-cvzxsx - click anywhere on the white background to see how each time message is logged to the console.

[daniellidg]

me too.

[adlion]

Have you guys found a solution for this issue.
I have used this in one of the project where I contribute and is firing every time I click.
I really need help on this otherwise a lot of work is waiting for me to change everything with something else.

[arrbhadri]

I am also facing the same issue where function behind OnDropDownClose is getting triggered on click of mouse.

One way i used to work around is that i had the event binded in all the other methods such as OnSelect, OnSelectAll, onDeselect & OnDeselectAll. So, this satisfied the scenario for me that only when selection changed, it triggered the event. Hope it helps someone!

[camengadisaputra]

i got same issue

[Kuldevsingh]

I am running with the same issue

[earthpyy]

Same here.

[bradfox2]

This was driving me insane. Sucks to see this as the issue.

[bradfox2]

@arrbhadri

Can you more clearly explain your workaround?

[rooby]

The problem is because closeDropdown() doesn't check if the drop down is already closed or not before emitting and the click outside directive is blindly calling closeDropdown() everytime someone clicks anywhere outside the dropdown.

This is a pretty major bug. It means that you cannot use the onDropDownClose event.

In my case, I need to fire service calls on dropdown close but not on select or deselect, so it's a bit of a mess trying to manually handle the dropdown state from the outside.

[edit] Seems to fix it. I'll make a pull request in a little while.

[rooby]

Actually in addition to that PR, we need to change the way that the clickOutside directive works, so that the click handler only binds when the dropdown is open.
So change it such that it binds when the drop down is open and unbinds again when it closes again.
Otherwise we're unnecessarily running that code a huge amount of times, when the user isn't even interacting with the dropdown in any way.

[sarunci]

@NileshPatel17
Could you please check the fix for this #246 and include those changes? I have used this component for 3 fields and whenever a mouse click happens, onDropDownClose event is getting fired for all the 3 fields!

[RangerGuan]

Use ngModelChange，<ng-multiselect-dropdown [data]="dataSource" [(ngModel)]="dropDownSelection" [settings]="dropDownSettings" (click)="dropDownSelect = true" (ngModelChange)="saveFunction($event)">