Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In Mat Table with mat-sort-header bug on scroll #17856

Open
Alina177 opened this issue Dec 2, 2019 · 7 comments
Open

In Mat Table with mat-sort-header bug on scroll #17856

Alina177 opened this issue Dec 2, 2019 · 7 comments

Comments

@Alina177
Copy link

@Alina177 Alina177 commented Dec 2, 2019

Reproduction

https://stackblitz.com/edit/angular-1vg9gn-trp98z?file=app%2Ftable-basic-example.html

It's a first bug in your components, respect for your staff. But today I find an interesting bug
Steps to reproduce:

  1. Just create a basic table from https://material.angular.io/components/table/overview with sort and test in Chrome Browser
  2. And try to scroll...ooops((((

Expected Behavior

What behavior were you expecting to see?
Correct work with scrolling

Actual Behavior

What behavior did you actually see?
Didn't work scroll

Environment

  • Angular:
  • CDK/Material: ^8.1.4
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
@tomicarsk6

This comment has been minimized.

Copy link

@tomicarsk6 tomicarsk6 commented Dec 2, 2019

Can you explain a little bit, which type of scroll is not working, scrolling with mouse, or scrolling with keyboard arrows?

@Alina177

This comment has been minimized.

Copy link
Author

@Alina177 Alina177 commented Dec 3, 2019

Actually, both. All that you need is table with using mat-sort-header and scroll in you table or for example scroll in Mat Dialog. Just try it

@tomicarsk6

This comment has been minimized.

Copy link

@tomicarsk6 tomicarsk6 commented Dec 3, 2019

I tried that, but I don't see any problem with scroll, it works normally on your stackblitz example to, both with mouse and with arrows.

@ShivPandey

This comment has been minimized.

Copy link

@ShivPandey ShivPandey commented Dec 7, 2019

Reproduction

https://stackblitz.com/edit/angular-1vg9gn-trp98z?file=app%2Ftable-basic-example.html

It's a first bug in your components, respect for your staff. But today I find an interesting bug
Steps to reproduce:

  1. Just create a basic table from https://material.angular.io/components/table/overview with sort and test in Chrome Browser
  2. And try to scroll...ooops((((

Expected Behavior

What behavior were you expecting to see?
Correct work with scrolling

Actual Behavior

What behavior did you actually see?
Didn't work scroll

Environment

  • Angular:
  • CDK/Material: ^8.1.4
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

I also facing the same issue with chrome browser. only mouse wheel scroll is not working

@Relic

This comment has been minimized.

Copy link

@Relic Relic commented Dec 10, 2019

I'm having a similar issue here. The current stackblitz doesn't reproduce this for me either, so if nobody can reliably reproduce it, I can try to create one with this bug reproducible when I have some time.

Angular: ^8.2.12
CDK/Material: ^8.2.3
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 64-bit

In my case, if mat-sort-header is present, my mouse wheel scroll semi-randomly breaks and stops scrolling after a short time of scrolling around. The place where it breaks is reproducible in that if I scroll slowly it always breaks in the same place and scrolling faster breaks it reliably in the same place further down the page. It doesn't seem to happen in my case if there is not much to scroll, but if there are many elements and a lot to scroll through it breaks consistently. Moving the scroll bar or scrolling with arrow keys, or some other random things that I couldn't reliably identify (waiting a while or messing around in dev console) seemed to fix it temporarily until I start scrolling with mouse wheel again.

This makes tables with sort headers completely unusuable currently.

@skobak

This comment has been minimized.

Copy link

@skobak skobak commented Dec 10, 2019

I also experience the same issue.

image

Easy to test:
The scroll will work well again If you delete code in a red rectangle (image above) in the inspector,

@ShivPandey

This comment has been minimized.

Copy link

@ShivPandey ShivPandey commented Dec 13, 2019

I'm having a similar issue here. The current stackblitz doesn't reproduce this for me either, so if nobody can reliably reproduce it, I can try to create one with this bug reproducible when I have some time.

Angular: ^8.2.12
CDK/Material: ^8.2.3
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 64-bit

In my case, if mat-sort-header is present, my mouse wheel scroll semi-randomly breaks and stops scrolling after a short time of scrolling around. The place where it breaks is reproducible in that if I scroll slowly it always breaks in the same place and scrolling faster breaks it reliably in the same place further down the page. It doesn't seem to happen in my case if there is not much to scroll, but if there are many elements and a lot to scroll through it breaks consistently. Moving the scroll bar or scrolling with arrow keys, or some other random things that I couldn't reliably identify (waiting a while or messing around in dev console) seemed to fix it temporarily until I start scrolling with mouse wheel again.

This makes tables with sort headers completely unusuable currently.

exactly similar things happened and mat-table-sort is unusable now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.