angular / angular/components

bug(MatTable MatSort MatPaginator): Wrong display of sticky columns after sorting

Đang mở
#24,977 2 bình luận 4 reaction 0 người được giao Xem trên GitHub
area: cdk/table P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Example project: https://stackblitz.com/edit/angular-ivy-fojmnq?file=src/app/app.component.ts

A MatTable with sticky columns, MatSort and MatPaginator are created. After scrolling the table horizontally and clicking on sort header, some cells of sticky columns are rendered with offsets. After moving a cursor or tapping (on touch devices) the view is refreshed and looks as expected.

This issue appears only when not all of data present in MatTableSource.data is displayed. When page size of paginator is set that is show all the data, everything works fine.

### Reproduction

Steps to reproduce in example project:
1. Move horizontal scroll
2. Click on any sort header 2 times - try not to move cursor much
3. Sticky columns cells should display with offset or not display at all
4. After moving cursor, view is back to normal

### Expected Behavior

Sticky columns shouldn't change position after sorting data

### Actual Behavior

Sticky columns change position

### Environment

- Angular: 13.2.2
- CDK/Material: 13.2.2
- Browser(s): Chrome (v101.0.4951.64), Firefox(v100.0.2), Safari (v15.1)
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với ví dụ StackBlitz được liên kết tại src/app/app.component.ts và tái hiện vấn đề bằng cách cuộn theo chiều ngang, sắp xếp hai lần và sử dụng một tập dữ liệu được phân trang. So sánh cách hiển thị của cột sticky trước và sau khi sắp xếp; hoàn tất khi các ô sticky giữ nguyên vị trí mà không cần di chuyển con trỏ hoặc sự kiện cảm ứng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.