fix: Added keyboard functionality for esc and Ctrl + a #8282
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Implemented keyboard shortcuts for record selection in the drag select component, adding support for Ctrl/Cmd + A to select all records and Escape to deselect all records.
- Added keyboard event handler in
/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsxfor Ctrl/Cmd + A and Escape shortcuts - Uses
queueMicrotaskto handle selection changes asynchronously for better performance - Queries elements with
data-selectable-idattribute to manage record selection state - Prevents default browser behavior for both keyboard shortcuts to avoid conflicts
1 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| useEffect(() => { | ||
| document.addEventListener('keydown', handleKeyDown); | ||
| return () => document.removeEventListener('keydown', handleKeyDown); | ||
| }, [handleKeyDown]); |
There was a problem hiding this comment.
style: Global event listener could interfere with other keyboard shortcuts when multiple DragSelect components are mounted. Consider using a more scoped approach or checking if the dragSelectable element is in focus.
packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
Outdated
Show resolved
Hide resolved
|
Thank you a lot for your contribution, @harshit078. We tried to find a more global solution to the problem. My implementation is still in progress. Things to finish:
|
|
Hello @harshit078, would you be able to continue working on this feature? I will try to do it myself if not. Thank you so much! |
Devessier
force-pushed
the
keyboard-scope-drag
branch
from
318e041
to
cfe6c01
Compare
|
I finished the implementation and rebased, but it doesn't seem to work properly any more. I will give a look at the problem tomorrow. |
|
It seems that the @lucasbordeau or @charlesBochet, do you know what I should do instead? Thanks for any help. I will put this PR on standby for now. |
| @@ -61,6 +62,7 @@ export const RecordBoard = () => { | |||
| columnIdsState, | |||
| columnsFamilySelector, | |||
| recordIdsByColumnIdFamilyState, | |||
| allRecordIdsSelector, | |||
There was a problem hiding this comment.
we could refactor this into record-index to mutualize this behavior between table and board but I don't think this is the topic of this PR
| [allRecordIdsSelector, setRecordAsSelected], | ||
| ); | ||
|
|
||
| useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table); |
There was a problem hiding this comment.
TableHotkeyScope.Table unlikely to work on the board
| recordTableId, | ||
| }); | ||
|
|
||
| useScopedHotkeys( |
There was a problem hiding this comment.
this should be moved to ActionBar
Description
Pressing ⎋ on indexes should deselect all records #8247
Add ctrl + a to select all in index view #8206
Changes
Screen.Recording.2024-11-02.at.2.17.14.AM.mov