feat:added shortcuts for addtaskdialog

Author: Neeraj-gagat

frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx

@@ -28,7 +28,7 @@ import {
   FieldKey,
 } from '@/components/utils/types';
 import { format } from 'date-fns';
-import { ADD_FIELDS } from './constants';
+import { ADDTASKDIALOG_FIELDS } from './constants';
 import { useAddTaskDialogKeyboard } from './UseTaskDialogKeyboard';
 import { useAddTaskDialogFocusMap } from './UseTaskDialogFocusMap';
 
@@ -60,7 +60,7 @@ export const AddTaskdialog = ({
   >({});
   const [focusedFieldIndex, setFocusedFieldIndex] = useState(0);
 
-  const focusedField = ADD_FIELDS[focusedFieldIndex];
+  const focusedField = ADDTASKDIALOG_FIELDS[focusedFieldIndex];
 
   const handleDialogOpenChange = (open: boolean) => {
     onOpenChange?.(open);
@@ -78,7 +78,7 @@ export const AddTaskdialog = ({
   }, [focusedField]);
 
   const focusMap = useAddTaskDialogFocusMap({
-    fields: ADD_FIELDS,
+    fields: ADDTASKDIALOG_FIELDS,
     inputRefs: inputRefs as any,
   });
 
@@ -97,7 +97,7 @@ export const AddTaskdialog = ({
   };
 
   const handleDialogKeyDown = useAddTaskDialogKeyboard({
-    fields: ADD_FIELDS,
+    fields: ADDTASKDIALOG_FIELDS,
     focusedFieldIndex,
     setFocusedFieldIndex,
     onEnter,
@@ -293,8 +293,6 @@ export const AddTaskdialog = ({
                       if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                         e.preventDefault();
                       }
-
-                      // ✅ allow enter to open dropdown
                       if (e.key === 'Enter') {
                         (e.currentTarget as HTMLButtonElement).click();
                       }

frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx

@@ -38,7 +38,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { formattedDate, handleCopy } from './tasks-utils';
 import { useEffect, useRef, useState } from 'react';
 import { useTaskDialogKeyboard } from './UseTaskDialogKeyboard';
-import { FIELDS } from './constants';
+import { EDITTASKDIALOG_FIELDS } from './constants';
 import { useTaskDialogFocusMap } from './UseTaskDialogFocusMap';
 
 export const TaskDialog = ({
@@ -97,7 +97,7 @@ export const TaskDialog = ({
     editState.isEditingRecur ||
     editState.isEditingAnnotations;
 
-  const focusedField = FIELDS[focusedFieldIndex];
+  const focusedField = EDITTASKDIALOG_FIELDS[focusedFieldIndex];
 
   const stopEditing = () => {
     onUpdateState({
@@ -145,12 +145,12 @@ export const TaskDialog = ({
   ]);
 
   const focusMap = useTaskDialogFocusMap({
-    fields: FIELDS,
+    fields: EDITTASKDIALOG_FIELDS,
     inputRefs: inputRefs,
   });
 
   const handleDialogKeyDown = useTaskDialogKeyboard({
-    fields: FIELDS,
+    fields: EDITTASKDIALOG_FIELDS,
     focusedFieldIndex: focusedFieldIndex,
     setFocusedFieldIndex: setFocusedFieldIndex,
     isEditingAny: isEditingAny,

frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx

@@ -927,4 +927,57 @@ describe('AddTaskDialog Component', () => {
       });
     });
   });
+
+  describe('Testing Shortcuts', () => {
+    beforeEach(() => {
+      Element.prototype.scrollIntoView = jest.fn();
+    });
+
+    test('ArrowDown moves focus to next field', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = await screen.findByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      const prioritySelect = screen.getByLabelText(/priority/i);
+      const priorityRow = prioritySelect.closest('div.grid');
+      expect(priorityRow).toHaveClass('bg-black/15');
+    });
+
+    test('Enter focuses priority select when priority row is focused', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = await screen.findByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+
+      const prioritySelect = screen.getByLabelText(/priority/i);
+      expect(prioritySelect).toHaveFocus();
+    });
+
+    test('Arrow keys do navigate while editing', () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = screen.getByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      const descriptionRow = screen.getByText(/priority/i);
+      expect(descriptionRow).toBeInTheDocument();
+    });
+
+    test('DateTimePicker is visible when any date field is in edit mode', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = screen.getByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+
+      expect(
+        screen.getByPlaceholderText('Select due date and time')
+      ).toBeInTheDocument();
+    });
+  });
 });

frontend/src/components/HomeComponents/Tasks/constants.ts

@@ -1,4 +1,4 @@
-export const FIELDS = [
+export const EDITTASKDIALOG_FIELDS = [
   'description',
   'due',
   'start',
@@ -13,7 +13,7 @@ export const FIELDS = [
   'annotations',
 ] as const;
 
-export const ADD_FIELDS = [
+export const ADDTASKDIALOG_FIELDS = [
   'description',
   'priority',
   'project',

frontend/src/components/utils/types.ts

@@ -1,4 +1,7 @@
-import { ADD_FIELDS, FIELDS } from '../HomeComponents/Tasks/constants';
+import {
+  ADDTASKDIALOG_FIELDS,
+  EDITTASKDIALOG_FIELDS,
+} from '../HomeComponents/Tasks/constants';
 
 export interface User {
   name: string;
@@ -181,9 +184,9 @@ export type AddTaskProps<F extends readonly string[]> = {
   closeDialog: () => void;
 };
 
-export type AddFieldKey = (typeof ADD_FIELDS)[number];
+export type AddFieldKey = (typeof ADDTASKDIALOG_FIELDS)[number];
 
-export type FieldKey = (typeof FIELDS)[number];
+export type FieldKey = (typeof EDITTASKDIALOG_FIELDS)[number];
 
 export type RefMap = Record<string, HTMLElement | null>;