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">
            &lt;perfect-scrollbar style="height: 100px;" [config]="config"&gt;
                <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>
            &lt;/perfect-scrollbar&gt;
        </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