From 07e482833cc375c84ba30889e9bed545749f7ec4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 24 May 2024 15:59:52 +0530
Subject: [PATCH] fix: shift keyboard navigation

---
 web/components/core/multiple-select/select-group.tsx        | 2 +-
 .../issues/issue-layouts/bulk-operations/root.tsx           | 2 +-
 web/components/issues/issue-layouts/list/block.tsx          | 3 ---
 web/hooks/use-multiple-select.ts                            | 6 +++---
 web/store/multiple_select.store.ts                          | 2 +-
 5 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/web/components/core/multiple-select/select-group.tsx b/web/components/core/multiple-select/select-group.tsx
index 2a9a2b13f..6f47b0632 100644
--- a/web/components/core/multiple-select/select-group.tsx
+++ b/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;
diff --git a/web/components/issues/issue-layouts/bulk-operations/root.tsx b/web/components/issues/issue-layouts/bulk-operations/root.tsx
index ae1b4353b..303bbd889 100644
--- a/web/components/issues/issue-layouts/bulk-operations/root.tsx
+++ b/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;
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index e666b27e7..535037b71 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/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;
 
diff --git a/web/hooks/use-multiple-select.ts b/web/hooks/use-multiple-select.ts
index 765be98e7..193ac91cb 100644
--- a/web/hooks/use-multiple-select.ts
+++ b/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;
diff --git a/web/store/multiple_select.store.ts b/web/store/multiple_select.store.ts
index 1b05dfb13..0c32c30fb 100644
--- a/web/store/multiple_select.store.ts
+++ b/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