html - Angular slickgrid page moves up on click any cell

Question

I am using Angular slickgrid to display my data, issue is when we click on any cell, row or checkbox, page moves up to starting element. Instead of moveing up page should stay as it is.

From DOM I found active element is '<div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div>'

When I delete above line, then it stop moving page up on click on any cell and working properly as per proper behaviour.

Here is my code:

<section id="order-grid">
    <div class="row">
      <div class="col-12" id="demo-container">
        <angular-slickgrid #slickGrid [gridId]="orderGrid" (onAngularGridCreated)="angularGridReady($event)"
        [columnDefinitions]="orderTableColumns" [gridOptions]="orderGridOptions" [dataset]="orderItems"
         (sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
         (sgOnCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)">
      </angular-slickgrid>
        </div>
    </div>
</section>

Grid options are:

this.orderGridOptions = {
      asyncEditorLoading: true,
        autoCommitEdit: true,
      
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 15
      },
      enableAutoResize: true,
      editable: true,
      enableCellNavigation: true,
      enableFiltering: true,
      enableRowSelection: true,
      rowSelectionOptions: {
        selectActiveRow: true
      },
    };

here is link for behaviour: https://app.box.com/s/gwoks1buvncz8q6bebd2t0bym4tf1tw7

I would appreciated when you give me some solution why this is happens

标签： htmlangularslickgridangular-slickgrid