Angular : Scroll Click On ngx-perfect-scrollbar Closes the Dropdown

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 :

        Dropdown
    
        
            
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here
                Action
                Another action
                Something else here

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.

    Dropdown

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.

https://youtu.be/cMbPgV7oAvk

Angular : Scroll Click On ngx-perfect-scrollbar Closes the Drop down