search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Resizing column continues after user lets go of mouse button #1952

Open elliotstoner opened 3 years ago

elliotstoner commented 3 years ago

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior When resizing a column when text is highlighted, the column continues to resize after the user lets go of the mouse button.

Expected behavior When resizing a column, the column should stop resizing when the user lets go of the mouse button.

Reproduction of the problem Can be reproduced by using the table located at http://swimlane.github.io/ngx-datatable/ (these STRs use the table there)

  1. Click and hold on a column divider (between Name and Gender), then drag down so that the header text (Gender, Company, and probably some of the values in the table itself) is selected.
  2. Let go of the mouse button
  3. Click and hold on a column divider between two columns that are selected (between Gender and Company) and drag (it will look like you're trying to drag the selected content). Let go of the mouse button - column will continue to resize.

What is the motivation / use case for changing the behavior?

Please tell us about your environment: Whatever the environment used for the example site.

I've attached a screen recording of this behavior happening with the steps to reproduce. It looks the user is highlighting text, which happens to include the vertical bar that the user would also uses to resize the column. Then when they click and drag that horizontal bar, the browser/OS recognizes that the user has highlighted text under the cursor, so it tries to copy/drag the text to wherever the user is going. When the user lets go, my assumption is the browser/OS swallows the "keyup" event, so ngx-datatable can't use that event to stop resizing (it still thinks the user has the mouse button down) (that of course is a very basic assumption, it could be one of many things). Screen Recording 2020-12-11 at 2.12.51 PM.mov.zip

joeveiga commented 3 years ago

@elliotstoner I tried to reproduce it with that exact same version of Chrome and was not able to.

Screen Recording 2020-12-14 at 4.38.28 PM.zip

elliotstoner commented 3 years ago

@joeveiga instead of clicking and dragging left/right after the text is highlighted, are you able to reproduce it if you drag down (like in my recording)?

joeveiga commented 3 years ago

@elliotstoner Nope, I tried to reproduce it as close to your recording as possible and still working fine. One odd thing I noticed is that, when you're first selecting the text, the columns didn't move at all. Even though you're dragging down, there should be some horizontal movement as well (unless you have some godlike wrist control lol 🤣 )

elliotstoner commented 3 years ago

@joeveiga I did notice that as well... definitely don't have godlike wrist control lol, I wasn't sure if that was expected or not? I wonder if it has to do with the OS (MacOS BigSur 11.0.1) and not the browser? Or the fact I'm using a trackpad?