Drop down getting closed on clicking the ngx-perfect-scrollbar scroll in your Angular application ? Here is the solution.
In this Angular tutorial, I’ll talk about an issue that I encountered while using ngx-perfect-scrollbar on a drop down. While clicking on the drop down scroll it simply closed the drop down.
Assuming that you already have an Angular application up and running with ngx-perfect-scrollbar being used in one of your drop downs. Here is how the component HTML template looks like :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div id="container" class="dropdown-menu">
<perfect-scrollbar style="height: 100px;" [config]="config">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</perfect-scrollbar>
</div>
</div>
The solution to the issue is to add a click event handler to the scroll bar. Let’s add a click event handler to scroll when the drop down is visible. So add a click event the drop down button.
<button (click)="addEventHandler()" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
Now add the following methods to the component’s .ts file.
addEventHandler(){
let element = document.getElementsByClassName('ps__rail-y')[0] as HTMLElement;
element.addEventListener('click', this.scroll, true);
}
scroll(e:Event){
e.stopPropagation();
}
Save the above changes and try running your Angular application and the scroll click shouldn’t close the drop down.
I have also created a video which shows how to implement the above solution. Do have a look.
Angular : Scroll Click On ngx-perfect-scrollbar Closes the Drop down