fix: Support range selection with grid/table checkboxes #7839
Conversation
levrik
force-pushed
the
fix-collection-checkbox-range-selection
branch
from
be59ade to
b451fa3
Compare
| } | ||
| }; | ||
|
|
||
| document.addEventListener('keydown', trackKeyDown); |
There was a problem hiding this comment.
these should be capturing listeners, don't want to miss it should something call stopPropagation
| document.removeEventListener('keydown', trackKeyDown); | ||
| document.removeEventListener('keyup', trackKeyUp); | ||
| }; | ||
| }); |
There was a problem hiding this comment.
| }); | |
| }, []); |
We don't want to re-run this every time we render, only on mount/unmount
There was a problem hiding this comment.
oh my... no idea how I missed that. added.
| document.removeEventListener('keyup', trackKeyUp); | ||
| }; | ||
| }); | ||
|
|
||
| // Checkbox should always toggle selection, regardless of selectionBehavior. |
There was a problem hiding this comment.
Will need to discuss with the team if the proposed change conflicts with this intent
There was a problem hiding this comment.
Just to add some background here: I have a table with href on each row so people use the checkboxes to do the initial selection. While the table then switches into another mode that allows selection also on the rest of each row, people tend to keep clicking on the checkboxes. Not having Shift+Click for range selection available there while it is on the rest of the table is kinda confusing and led to complaints from customers and even the CEO 😅
|
FYI, haven't had a chance to bring it up yet. However, I did notice another issue we'll need to consider. This attaches keydown window listeners, however, if the window isn't focused when the shift key is pressed. Maybe the user was responding to Slack in another window, but then shift clicked back. The range won't be expanded. We have to know at the time that the click occurs regardless. We'll either need to expose our press events on checkbox or we'll need to expose the shift key in the onChange event. Thanks for your patience. |
|
@snowystinger Yeah. These were compromises that I personally am fine with for my usecase but I understand that as a library this maybe is not good enough. Having access to the |
Upstreaming a fix for the product I'm working on. Please let me know if you require an issue to be created and I'll create one.
I'm not particulary happy with the fix but making
e.shiftKeyflag available inonChangeofuseCheckbox, which goes down quite deep through other hooks, probably does not make a lot of sense. Simply tracking shift key state in a local ref seemed like the cleanest solution to me.✅ Pull Request Checklist:
📝 Test Instructions:
Use a table with
slot="selection"checkboxes and try to do a range selection by holdingShiftkey.🧢 Your Project: