单元格渲染器组件在垫选项卡内时移出 AG 网格

Question

I have two AG-grid displaying datas. Each of them has, at the end of each row, two icons meant to modify or suppress the data line. They each are inside of a mat tab.

<mat-tab-group>
    <mat-tab label="Adresses">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" *ngIf="modify" (click)="showCreateAdresseDialog()">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rowData"
        [gridOptions]="gridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRowsTemplate"
        (gridReady)="onGridReady($event)">
      </ag-grid-angular>
    </mat-tab>

    <mat-tab label="Rôles">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" (click)="showCreateRoleDialog()" *ngIf="modify">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rolesRowData"
        [columnDefs]="columns"
        [gridOptions]="rolesGridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRolesRowsTemplate"
        (gridReady)="onRolesGridReady($event)">
      </ag-grid-angular>
    </mat-tab>
  </mat-tab-group>

Below, you may see how I added the components in the AG-grid.

frameworkComponents = {
    modifierButtonRenderer: ActeurModifierAdresseButtonRendererComponent,
    // Other components
};

  gridOptions = {
context: {
  parentComponent: this
},
defaultColDef: {
  sortable: true,
  filter: true,
  suppressMovable: true
},
columnDefs: [
  { /* some data columns */ },
  {cellRenderer: 'modifierButtonRenderer', pinned: 'right', width: 50, suppressMenu: true},
  {cellRenderer: 'supprimerButtonRenderer', pinned: 'right', width: 50, suppressMenu: true}
]

Now, each button is rendered inside the AG-grid. But if switch to the second mat-tab, and then go back to the first one, each cellRenderer is moved outside grid. It's not just the CSS that changed the position of the element. They moved just after the closing tag of the grid.

Before I switch mat tabs

After the switch

Does anyone have an idea of what is happening, or how I can fix this?

Thanks,

Have a nice day

Answer 1

After a few tests, it seems that surrounding the <ag-grid-angular> with a single <div> is sufficient to remove that bug.

Still, it is weird that putting the grid as a direct child of the <mat-tab> element could cause that bug.