Pager Control - Page Size Change needs to lose focus / blur

Question

I am using the Pager control, separate from a Grid.

I provide the users 5, 10, and 20 pages, and handle the data to display etc. It's working fine.

The only thing we want to do from here is the drop down to lose focus after the change. Otherwise, when they scroll or arrow after their change, it changes the drop down selection. If the pager has moved out of their view... it's confusing.

I have tried several approaches with blur() but nothing seems to be working. Is there a good way to do this?

<ejs-pager *ngIf="list.length > pageSize" #commentsPager [totalRecordsCount]="list.length"

                          [pageSize]="pageSize"
                          [pageSizes]="pageSizes"
                          [pageCount]="pageCount"
                          [currentPage]="currentPage"
                          (click)="click($event)"
                          (dropDownChanged)="pageSizeChange($event)"></ejs-pager>

   @ViewChild('commentsPager', { static: false }) public commentsPager: ElementRef;

...

click(args): void {
      console.log(args);
      if (args.currentPage) {
         this.changePage(args.currentPage);
      }
   }

   pageSizeChange(args: any): void {
      if (args.pageSize !== this.pageSize) {
         this.pageSize = args.pageSize;
         this.visibleList= this.list.slice(0, this.pageSize);
         this.currentPage = 1;
      }
   }

   changePage(page: number): void {
      this.currentPage = page;
      const start = (page - 1) * this.pageSize;
      this.visibleList= this.list.slice(start, start + this.pageSize);

      // this.commentsPager.nativeElement.ViewChildren('???').blur();
   }

Julie Smith · Answer

I should specify the arrow keys cause the page number to change.

Balaji Sekar · Answer

Hi Julie, 
 
Greetings from the Syncfusion support, 
 
Query #1:  we want to do from here is the drop down to lose focus after the change.  Otherwise, when they scroll or arrow after their change, it changes the drop down selection 
 
We have validated your query and we are unable to reproduced the reported problem. By default, pager dropdown will lose the focus after selected item and it is maintained the pageSize while paging the Grid using arrows or scroll. We have prepared a sample with your requirement. Please refer the below code example and sample for more information. 
 
Sample link: https://stackblitz.com/edit/angular-khlzyn-q4bcus?file=app.component.html 

If you faced same problem in your end. Please share the below details. It will be helpful to validate further. 

Share the issue reproducing replication procedure in step by step
Please share your issue scenario in video demonstration
If possible to reproduce your scenario in above sample. Please share to us it will validate further.

Query #2: I should specify the arrow keys cause the page number to change 

Before proceeding, we have confirmed that you have reported the pager dropdown selected item changed at own while arrow key pressed or we misunderstood your query please share your exact requirement details to us it will help to validate further. 

Regards, 
Balaji Sekar.

Julie Smith · Answer

Thank you Balaji, the example on stackblitz is very helpful and is working like we would want. However, our specific usage is not working this way.

We are using the pager and page sizes in the following ways...

One, we are using the pager like this stackblitz: https://stackblitz.com/edit/angular-khlzyn-5hqevj?file=app.component.ts

Two, we are using the pager separate from a grid, e.g. with a list of components or data like below:

Balaji Sekar · Answer

Hi Julie, 
 
We have validated your query and we are unable to reproduced the reported issue. We are prepared a sample with your requirement.  
 
Please refer the below sample for more information. 
 
Sample link: https://stackblitz.com/edit/angular-khlzyn-q4bcus?file=app.component.html 

If you facing the sample error, please reproduced your query in above sample and share the video demonstration of the reported problem to us. It will helpful validate further. 

Regards, 
Balaji Sekar.

Julie Smith · Answer

Please see my example to reproduce our issue: https://stackblitz.com/edit/angular-khlzyn-5hqevj?file=app.component.ts

The page size selection maintains focus after changing the number of items per page.

Balaji Sekar · Answer

Hi Julie 
 
Thanks for your update, 
 
We have validated your query and we can also see that focus maintain in the pageSize dropdown after selected pageSize. Because of  the pager dropdown maintained the focus using “e-input-focus” class. Since we suggest you to remove that class from the pageSize dropdown using actionBegin event. 




[app.component.ts] 
  actionBegin(args) {     
    if (args.requestType == "paging") { 
      var pager = this.grid.getPager().querySelector(".e-pagesizes .e-pagerdropdown span"); 
      if (pager.classList.contains("e-input-focus")) { 
        pager.classList.remove("e-input-focus"); 
      } 
    } 
  } 
 
 
Sample link: https://stackblitz.com/edit/angular-khlzyn-yrdgjw?file=app.component.ts 

Please get back to us, if you further assistance. 

Regards, 
Balaji Sekar.