feat: fix toggleSelectItem not being rebindable (#363)

Author: lukasbach

next-release-notes.md

@@ -1,5 +1,6 @@
 ### Bug Fixes and Improvements
 - Improved keyboard-controlled drag and drop behavior to not show redundant drop target directly below opened folder item (#363)
+- Fixed an issue where the `toggleSelectItem` (Ctrl + Space) hotkey could not be rebounded or disabled (#363)
 
 ### Other Changes
  - Added some documentation on the data structure required by a StaticDataProvider.

packages/core/src/hotkeys/defaultKeyboardBindings.ts

@@ -7,7 +7,7 @@ export const defaultKeyboardBindings: Required<KeyboardBindings> = {
   primaryAction: ['enter'],
   renameItem: ['f2'],
   abortRenameItem: ['escape'],
-  toggleSelectItem: ['control+space'],
+  toggleSelectItem: ['control+ '],
   abortSearch: ['escape', 'enter'],
   startSearch: [],
   selectAll: ['control+a'],

packages/core/src/interactionMode/ClickArrowToExpandInteractionManager.ts

@@ -28,10 +28,11 @@ export class ClickArrowToExpandInteractionManager
   ): HTMLProps<HTMLElement> {
     return {
       onClick: e => {
+        const isSpacebarEvent = e.detail === 0;
         actions.focusItem();
-        if (e.shiftKey) {
+        if (e.shiftKey && !isSpacebarEvent) {
           actions.selectUpTo(!isControlKey(e));
-        } else if (isControlKey(e)) {
+        } else if (isControlKey(e) && !isSpacebarEvent) {
           if (renderFlags.isSelected) {
             actions.unselectItem();
           } else {

packages/core/src/interactionMode/ClickItemToExpandInteractionManager.ts

@@ -26,10 +26,11 @@ export class ClickItemToExpandInteractionManager implements InteractionManager {
   ): HTMLProps<HTMLElement> {
     return {
       onClick: e => {
+        const isSpacebarEvent = e.detail === 0;
         actions.focusItem();
-        if (e.shiftKey) {
+        if (e.shiftKey && !isSpacebarEvent) {
           actions.selectUpTo(!isControlKey(e));
-        } else if (isControlKey(e)) {
+        } else if (isControlKey(e) && !isSpacebarEvent) {
           if (renderFlags.isSelected) {
             actions.unselectItem();
           } else {

packages/core/src/interactionMode/DoubleClickItemToExpandInteractionManager.ts

@@ -28,10 +28,11 @@ export class DoubleClickItemToExpandInteractionManager
   ): HTMLProps<HTMLElement> {
     return {
       onClick: e => {
+        const isSpacebarEvent = e.detail === 0;
         actions.focusItem();
-        if (e.shiftKey) {
+        if (e.shiftKey && !isSpacebarEvent) {
           actions.selectUpTo(!isControlKey(e));
-        } else if (isControlKey(e)) {
+        } else if (isControlKey(e) && !isSpacebarEvent) {
           if (renderFlags.isSelected) {
             actions.unselectItem();
           } else {

packages/core/src/stories/BasicExamples.stories.tsx

@@ -703,3 +703,47 @@ export const ItemContainersWithMargin = () => (
     <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
   </UncontrolledTreeEnvironment>
 );
+
+export const HotkeysDisabled = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    keyboardBindings={{
+      primaryAction: [],
+      moveFocusToFirstItem: [],
+      moveFocusToLastItem: [],
+      expandSiblings: [],
+      renameItem: [],
+      abortRenameItem: [],
+      toggleSelectItem: [],
+      abortSearch: [],
+      startSearch: [],
+      selectAll: [],
+      startProgrammaticDnd: [],
+      abortProgrammaticDnd: [],
+      completeProgrammaticDnd: [],
+    }}
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: [
+          'Fruit',
+          'Meals',
+          'America',
+          'Europe',
+          'Asia',
+          'Desserts',
+        ],
+      },
+    }}
+  >
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);

packages/core/src/tree/useTreeKeyboardBindings.ts

@@ -135,6 +135,7 @@ export const useTreeKeyboardBindings = () => {
     'toggleSelectItem',
     e => {
       e.preventDefault();
+      e.stopPropagation();
       if (viewState.focusedItem !== undefined) {
         if (
           viewState.selectedItems &&

packages/core/test/helpers/TestUtil.tsx

@@ -85,14 +85,15 @@ export class TestUtil {
   public async clickItem(title: string) {
     await this.expectVisible(title);
     await act(async () => {
-      fireEvent.click(await this.renderProps!.findByText(title));
+      fireEvent.click(await this.renderProps!.findByText(title), { detail: 1 });
     });
   }
 
   public async controlClick(title: string) {
     await act(async () => {
       fireEvent.click(await this.renderProps!.findByText(title), {
         ctrlKey: true,
+        detail: 1,
       });
     });
   }
@@ -102,6 +103,7 @@ export class TestUtil {
       fireEvent.click(await this.renderProps!.findByText(title), {
         ctrlKey: true,
         shiftKey: true,
+        detail: 1,
       });
     });
   }
@@ -110,6 +112,7 @@ export class TestUtil {
     await act(async () => {
       fireEvent.click(await this.renderProps!.findByText(title), {
         shiftKey: true,
+        detail: 1,
       });
     });
   }

packages/core/test/selection.spec.tsx

@@ -104,12 +104,12 @@ describe('selection', () => {
       await test.focusTree();
       await test.clickItem('before');
       await test.pressKeys('ArrowDown');
-      await test.pressKeys('Control', 'Space');
+      await test.pressKeys('Control', ' ');
       await test.pressKeys('ArrowDown');
-      await test.pressKeys('Control', 'Space');
+      await test.pressKeys('Control', ' ');
       await test.pressKeys('ArrowDown');
       await test.pressKeys('ArrowDown');
-      await test.pressKeys('Control', 'Space');
+      await test.pressKeys('Control', ' ');
       await test.expectFocused('aa');
       await test.expectSelected('before', 'target', 'after', 'aa');
       await test.expectTreeUnchanged();