Primeng p-dropdown should close on scrolling document page

Question

Had p-dropdown which is inside p-table as column header. While scrolling p-table, p-dropdown should close.

<p-table #dTable [columns]="cols">
<ng-template pTemplate="header">
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      {{col.header}}
    </th>
  </tr>
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngSwitch]="col.field"
      [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      <input [(ngModel)]="designNameFilterValue" *ngSwitchCase="'designName'" pInputText class="design-name-filter"
        (keyup)="refreshTree(hideNonSelected, defaultFilter)">
      <div *ngSwitchCase="'cost'">
        Value >= {{cost| currency}}
        <i class="fa fa-close"
          (click)="costFilterValue = 0; refreshTree(hideNonSelected, defaultFilter);"
          style="cursor:pointer" *ngIf="costFilterValue"></i>
        <p-slider [(ngModel)]="cost" [min]="0" [max]="maxCost"
          (onSlideEnd)="refreshTreeTable(hideNonSelected, defaultFilter)"></p-slider>
      </div>
      <p-dropdown class="filter" *ngSwitchCase="'risk'" [options]="filterdropdown" (click)="hide()"
        [(ngModel)]="FilterValue" (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
      <p-dropdown class="state-filter" *ngSwitchCase="'state'" [options]="stateItemsForFilterDropDown"
        (click)="hide()" [(ngModel)]="defaultFilter"
        (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
    </th>
  </tr>
</ng-template>

Please assist on this.

Answer 1

Well, I also ran in a similar requirement, and after implementing that feature. We realized its not the valid one, considering the below situation.

Think about Mobile users and drop down have the search or filter feature with an input box.

So whenever the user focuses on the input field it will open the drop-down and at the same time, it opens the mobile keypad that reduced the viewport and fire scroll event. And on the scroll, you want to close the drop-down. Considering the above situation it will be in a loop (open-close) that we have to avoid. And if you have only desktop users than its okay.

So if you have only a desktop user, you implement this

app.component.ts

import { Component , Inject} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HostListener} from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  cities1 = [];
  constructor() {
    this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];
  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
    const ele = document.getElementById('mydiv');
    ele.click();
  }
}

here is stackblitz link