IgxGrid: wrong order and duplication of columns after resizing and scrolling the grid

[ddaribo]

Description

An IgxGrid, where the columns widths are defined, such that they take less than the available grid horizontal space (for example column width for all is set to 100px and the grid's width resolves to > columns.length * 100. The width of the columns could also be set to "auto", provided that the first condition is met and there is empty space after the last column.

When resizing the screen horizontally, such that a scrollbar appears in the grid, scrolling it to the end horizontally and then going back to full width of the screen, the columns order is not as defined and there are some duplicated ones.

• igniteui-angular version: 17.0.x, 16.1.x, 15.1.x and earlier
• browser: any

Steps to reproduce

1. Open this sample and click "Open in New Tab" in StackBlitz

2. Open the Dev Tools

3. Resize the Dev Tools panel so that the grid is significantly shrinked, for example only the first three columns remain visible

4. Scroll the grid hroizontally to the end

5. Close the Dev Tools

6. Alternatively, perform the same by minimizing/maximizing the browser window.

Result

The columns are not rendered in the correct order and some of them ar duplicated. When clicking on any of the duplicated columns' headers, both instances get highlighted as selected.

Expected result

Keep columns as defined, no duplicates.

Attachments