ng-multiselect-dropdown icon indicating copy to clipboard operation
ng-multiselect-dropdown copied to clipboard

onDropDownClose is called much more than expected

Open Karolis92 opened this issue 6 years ago • 12 comments

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.

Karolis92 avatar Feb 20 '19 12:02 Karolis92

me too.

daniellidg avatar Sep 06 '19 06:09 daniellidg

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.

adlion avatar Sep 13 '19 11:09 adlion

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!

arrbhadri avatar Oct 21 '19 06:10 arrbhadri

i got same issue

camengadisaputra avatar Nov 12 '19 16:11 camengadisaputra

I am running with the same issue

Kuldevsingh avatar Jan 06 '20 10:01 Kuldevsingh

Same here.

earthpyy avatar Feb 07 '20 09:02 earthpyy

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

bradfox2 avatar Feb 13 '20 15:02 bradfox2

@arrbhadri

Can you more clearly explain your workaround?

bradfox2 avatar Feb 13 '20 15:02 bradfox2

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 avatar Jun 24 '20 08:06 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.

rooby avatar Jun 25 '20 04:06 rooby

@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!

sarunci avatar Mar 10 '21 11:03 sarunci

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

RangerGuan avatar Mar 16 '21 03:03 RangerGuan