fix: shift keyboard navigation

web/components/core/multiple-select/select-group.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 // hooks
-import { TSelectionHelper, TSelectionSnapshot, useMultipleSelect } from "@/hooks/use-multiple-select";
+import { TSelectionHelper, useMultipleSelect } from "@/hooks/use-multiple-select";
 
 type Props = {
   children: (helpers: TSelectionHelper) => React.ReactNode;

web/components/issues/issue-layouts/bulk-operations/root.tsx

@@ -13,8 +13,8 @@ import {
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { TSelectionHelper, TSelectionSnapshot } from "@/hooks/use-multiple-select";
 import { useMultipleSelectStore } from "@/hooks/store";
+import { TSelectionHelper } from "@/hooks/use-multiple-select";
 
 type Props = {
   className?: string;

web/components/issues/issue-layouts/list/block.tsx

@@ -106,9 +106,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   const isIssueActive = selectionHelpers.isEntityActive(issue.id);
   const isSubIssue = nestingLevel !== 0;
 
-  console.log("isIssueSelected", issue.id, isIssueSelected);
-  console.log("isIssueActive", issue.id, isIssueActive);
-
   // if sub issues have been fetched for the issue, use that for count or use issue's sub_issues_count
   // const subIssuesCount = subIssues ? subIssues.length : issue.sub_issues_count;
 

web/hooks/use-multiple-select.ts

@@ -265,14 +265,13 @@ export const useMultipleSelect = (props: Props) => {
       const activeEntityDetails = getActiveEntityDetails();
       const nextActiveEntity = getNextActiveEntity();
       const previousActiveEntity = getPreviousActiveEntity();
+
       if (e.key === "ArrowDown" && activeEntityDetails) {
         if (!nextActiveEntity) return;
-        // console.log("selected by down", elementDetails.entityID);
         handleEntitySelection(nextActiveEntity);
       }
       if (e.key === "ArrowUp" && activeEntityDetails) {
         if (!previousActiveEntity) return;
-        // console.log("selected by up", elementDetails.entityID);
         handleEntitySelection(previousActiveEntity);
       }
     };
@@ -291,6 +290,7 @@ export const useMultipleSelect = (props: Props) => {
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.shiftKey) return;
       const activeEntityDetails = getActiveEntityDetails();
       // set active entity id to the first entity
       if (["ArrowUp", "ArrowDown"].includes(e.key) && !activeEntityDetails) {
@@ -346,7 +346,7 @@ export const useMultipleSelect = (props: Props) => {
       handleGroupClick,
       isGroupSelected,
     }),
-    [handleEntityClick, handleGroupClick, isEntityActive, isEntitySelected, isGroupSelected]
+    [clearSelection, handleEntityClick, handleGroupClick, isEntityActive, isEntitySelected, isGroupSelected]
   );
 
   return helpers;

web/store/multiple_select.store.ts

@@ -1,9 +1,9 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // hooks
 import { TEntityDetails } from "@/hooks/use-multiple-select";
 // services
 import { IssueService } from "@/services/issue";
-import { computedFn } from "mobx-utils";
 
 export type IMultipleSelectStore = {
   // observables