From f6f9caf9e6b0c6e91ce36eee8b4ac1221d2d5230 Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Mon, 3 Apr 2023 19:04:11 +0530
Subject: [PATCH] fix: now user can navigate using arrow keys (#681)

---
 .../command-palette/change-issue-assignee.tsx |  3 +-
 .../command-palette/change-issue-priority.tsx |  3 +-
 .../command-palette/change-issue-state.tsx    |  3 +-
 .../command-palette/command-pallette.tsx      | 81 ++++++-------------
 apps/app/styles/command-pallette.css          |  7 +-
 5 files changed, 33 insertions(+), 64 deletions(-)

diff --git a/apps/app/components/command-palette/change-issue-assignee.tsx b/apps/app/components/command-palette/change-issue-assignee.tsx
index 54e9a4f21..09f597e2e 100644
--- a/apps/app/components/command-palette/change-issue-assignee.tsx
+++ b/apps/app/components/command-palette/change-issue-assignee.tsx
@@ -98,8 +98,7 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue }
         <Command.Item
           key={option.value}
           onSelect={() => handleIssueAssignees(option.value)}
-          className="focus:bg-slate-200 focus:outline-none"
-          tabIndex={0}
+          className="focus:outline-none"
         >
           {option.content}
         </Command.Item>
diff --git a/apps/app/components/command-palette/change-issue-priority.tsx b/apps/app/components/command-palette/change-issue-priority.tsx
index 4c8661131..b6eca1df8 100644
--- a/apps/app/components/command-palette/change-issue-priority.tsx
+++ b/apps/app/components/command-palette/change-issue-priority.tsx
@@ -60,8 +60,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue }
         <Command.Item
           key={priority}
           onSelect={() => handleIssueState(priority)}
-          className="focus:bg-slate-200 focus:outline-none"
-          tabIndex={0}
+          className="focus:outline-none"
         >
           <div className="flex items-center space-x-3">
             {getPriorityIcon(priority)}
diff --git a/apps/app/components/command-palette/change-issue-state.tsx b/apps/app/components/command-palette/change-issue-state.tsx
index a2d06050d..2eef56193 100644
--- a/apps/app/components/command-palette/change-issue-state.tsx
+++ b/apps/app/components/command-palette/change-issue-state.tsx
@@ -75,8 +75,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue }) =
             <Command.Item
               key={state.id}
               onSelect={() => handleIssueState(state.id)}
-              className="focus:bg-slate-200 focus:outline-none"
-              tabIndex={0}
+              className="focus:outline-none"
             >
               <div className="flex items-center space-x-3">
                 {getStateGroupIcon(state.group, "16", "16", state.color)}
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index fd32e7ce1..650ab5a65 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -492,8 +492,7 @@ export const CommandPalette: React.FC = () => {
                                         setIsPaletteOpen(false);
                                       }}
                                       value={value}
-                                      className="focus:bg-gray-200 focus:outline-none"
-                                      tabIndex={0}
+                                      className="focus:outline-none"
                                     >
                                       <div className="flex items-center gap-2 overflow-hidden text-gray-700">
                                         <Icon className="h-4 w-4 text-gray-500" color="#6b7280" />
@@ -519,8 +518,7 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-state"]);
                               }}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 <Squares2X2Icon className="h-4 w-4 text-gray-500" />
@@ -533,8 +531,7 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-priority"]);
                               }}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 <ChartBarIcon className="h-4 w-4 text-gray-500" />
@@ -547,8 +544,7 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-assignee"]);
                               }}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 <UsersIcon className="h-4 w-4 text-gray-500" />
@@ -560,8 +556,7 @@ export const CommandPalette: React.FC = () => {
                                 handleIssueAssignees(user.id);
                                 setSearchTerm("");
                               }}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 {issueDetails?.assignees.includes(user.id) ? (
@@ -578,11 +573,7 @@ export const CommandPalette: React.FC = () => {
                               </div>
                             </Command.Item>
 
-                            <Command.Item
-                              onSelect={deleteIssue}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
-                            >
+                            <Command.Item onSelect={deleteIssue} className="focus:outline-none">
                               <div className="flex items-center gap-2 text-gray-700">
                                 <TrashIcon className="h-4 w-4 text-gray-500" />
                                 Delete issue
@@ -593,8 +584,7 @@ export const CommandPalette: React.FC = () => {
                                 setIsPaletteOpen(false);
                                 copyIssueUrlToClipboard();
                               }}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 <LinkIcon className="h-4 w-4 text-gray-500" />
@@ -604,11 +594,7 @@ export const CommandPalette: React.FC = () => {
                           </>
                         )}
                         <Command.Group heading="Issue">
-                          <Command.Item
-                            onSelect={createNewIssue}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
-                          >
+                          <Command.Item onSelect={createNewIssue} className="focus:bg-gray-200">
                             <div className="flex items-center gap-2 text-gray-700">
                               <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
                               Create new issue
@@ -621,8 +607,7 @@ export const CommandPalette: React.FC = () => {
                           <Command.Group heading="Project">
                             <Command.Item
                               onSelect={createNewProject}
-                              className="focus:bg-gray-200 focus:outline-none"
-                              tabIndex={0}
+                              className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-gray-700">
                                 <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
@@ -638,8 +623,7 @@ export const CommandPalette: React.FC = () => {
                             <Command.Group heading="Cycle">
                               <Command.Item
                                 onSelect={createNewCycle}
-                                className="focus:bg-gray-200 focus:outline-none"
-                                tabIndex={0}
+                                className="focus:outline-none"
                               >
                                 <div className="flex items-center gap-2 text-gray-700">
                                   <ContrastIcon className="h-4 w-4" color="#6b7280" />
@@ -652,8 +636,7 @@ export const CommandPalette: React.FC = () => {
                             <Command.Group heading="Module">
                               <Command.Item
                                 onSelect={createNewModule}
-                                className="focus:bg-gray-200 focus:outline-none"
-                                tabIndex={0}
+                                className="focus:outline-none"
                               >
                                 <div className="flex items-center gap-2 text-gray-700">
                                   <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
@@ -664,11 +647,7 @@ export const CommandPalette: React.FC = () => {
                             </Command.Group>
 
                             <Command.Group heading="View">
-                              <Command.Item
-                                onSelect={createNewView}
-                                className="focus:bg-gray-200 focus:outline-none"
-                                tabIndex={0}
-                              >
+                              <Command.Item onSelect={createNewView} className="focus:outline-none">
                                 <div className="flex items-center gap-2 text-gray-700">
                                   <ViewListIcon className="h-4 w-4" color="#6b7280" />
                                   Create new view
@@ -686,8 +665,7 @@ export const CommandPalette: React.FC = () => {
                               setSearchTerm("");
                               setPages([...pages, "settings"]);
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <SettingIcon className="h-4 w-4" color="#6b7280" />
@@ -698,8 +676,7 @@ export const CommandPalette: React.FC = () => {
                         <Command.Group heading="Account">
                           <Command.Item
                             onSelect={createNewWorkspace}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <FolderPlusIcon className="h-4 w-4 text-gray-500" />
@@ -716,8 +693,7 @@ export const CommandPalette: React.FC = () => {
                               });
                               document.dispatchEvent(e);
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
@@ -729,8 +705,7 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               window.open("https://docs.plane.so/", "_blank");
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <DocumentIcon className="h-4 w-4 text-gray-500" />
@@ -742,8 +717,7 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               window.open("https://discord.com/invite/A92xrEGCge", "_blank");
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <DiscordIcon className="h-4 w-4" color="#6b7280" />
@@ -758,8 +732,7 @@ export const CommandPalette: React.FC = () => {
                                 "_blank"
                               );
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <GithubIcon className="h-4 w-4" color="#6b7280" />
@@ -771,8 +744,7 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               (window as any).$crisp.push(["do", "chat:open"]);
                             }}
-                            className="focus:bg-gray-200 focus:outline-none"
-                            tabIndex={0}
+                            className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-gray-700">
                               <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" />
@@ -787,8 +759,7 @@ export const CommandPalette: React.FC = () => {
                       <>
                         <Command.Item
                           onSelect={() => goToSettings()}
-                          className="focus:bg-gray-200 focus:outline-none"
-                          tabIndex={0}
+                          className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-gray-700">
                             <SettingIcon className="h-4 w-4 text-gray-500" />
@@ -797,8 +768,7 @@ export const CommandPalette: React.FC = () => {
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("members")}
-                          className="focus:bg-gray-200 focus:outline-none"
-                          tabIndex={0}
+                          className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-gray-700">
                             <SettingIcon className="h-4 w-4 text-gray-500" />
@@ -807,8 +777,7 @@ export const CommandPalette: React.FC = () => {
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("billing")}
-                          className="focus:bg-gray-200 focus:outline-none"
-                          tabIndex={0}
+                          className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-gray-700">
                             <SettingIcon className="h-4 w-4 text-gray-500" />
@@ -817,8 +786,7 @@ export const CommandPalette: React.FC = () => {
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("integrations")}
-                          className="focus:bg-gray-200 focus:outline-none"
-                          tabIndex={0}
+                          className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-gray-700">
                             <SettingIcon className="h-4 w-4 text-gray-500" />
@@ -827,8 +795,7 @@ export const CommandPalette: React.FC = () => {
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("import-export")}
-                          className="focus:bg-gray-200 focus:outline-none"
-                          tabIndex={0}
+                          className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-gray-700">
                             <SettingIcon className="h-4 w-4 text-gray-500" />
diff --git a/apps/app/styles/command-pallette.css b/apps/app/styles/command-pallette.css
index 00f4e6483..c28486f45 100644
--- a/apps/app/styles/command-pallette.css
+++ b/apps/app/styles/command-pallette.css
@@ -31,5 +31,10 @@
 }
 
 [cmdk-item]:hover {
-  background-color: rgb(243 244 246);
+  background-color: rgb(229 231 235);
 }
+
+
+[aria-selected="true"] {
+  background-color: rgb(229 231 235);
+}
\ No newline at end of file