Feat/extend shortcuts for addtaskdialog

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/Tasks.tsx

@@ -1119,6 +1119,7 @@ export const Tasks = (
                     />
                     <div className="flex justify-center">
                       <AddTaskdialog
+                        onOpenChange={handleDialogOpenChange}
                         isOpen={isAddTaskOpen}
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
@@ -1429,6 +1430,7 @@ export const Tasks = (
                   <div className="flex items-center justify-left">
                     <div className="pr-2">
                       <AddTaskdialog
+                        onOpenChange={handleDialogOpenChange}
                         isOpen={isAddTaskOpen}
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}

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

@@ -25,3 +25,18 @@ export function useTaskDialogFocusMap<F extends readonly string[]>({
     [fields, inputRefs]
   );
 }
+
+export function useAddTaskDialogFocusMap<F extends readonly string[]>({
+  fields,
+  inputRefs,
+}: UseTaskDialogFocusMapProps<F>) {
+  return React.useCallback(
+    (field: F[number]) => {
+      const element = inputRefs.current[field];
+      if (!element) return;
+
+      element.focus();
+    },
+    [fields, inputRefs]
+  );
+}

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

@@ -1,4 +1,7 @@
-import { UseTaskDialogKeyboardProps } from '@/components/utils/types';
+import {
+  AddTaskProps,
+  UseTaskDialogKeyboardProps,
+} from '@/components/utils/types';
 import React from 'react';
 
 export function useTaskDialogKeyboard<F extends readonly string[]>({
@@ -55,3 +58,49 @@ export function useTaskDialogKeyboard<F extends readonly string[]>({
     ]
   );
 }
+
+export function useAddTaskDialogKeyboard<F extends readonly string[]>({
+  fields,
+  focusedFieldIndex,
+  setFocusedFieldIndex,
+  onEnter,
+  closeDialog,
+}: AddTaskProps<F>) {
+  return React.useCallback(
+    (e: React.KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+
+      const isTyping =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable;
+
+      if (isTyping && (e.key === 'Enter' || e.key === 'Escape')) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setFocusedFieldIndex((i) => Math.min(i + 1, fields.length - 1));
+          break;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          setFocusedFieldIndex((i) => Math.max(i - 1, 0));
+          break;
+
+        case 'Enter':
+          e.preventDefault();
+          e.stopPropagation();
+          const field = fields[focusedFieldIndex];
+          onEnter(field);
+          break;
+
+        case 'Escape':
+          e.preventDefault();
+          closeDialog();
+          break;
+      }
+    },
+    [fields, focusedFieldIndex, setFocusedFieldIndex, onEnter, closeDialog]
+  );
+}

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/__tests__/Tasks.test.tsx

@@ -225,11 +225,7 @@ describe('Tasks Component', () => {
 
       render(<Tasks {...mockProps} />);
 
-      await waitFor(async () => {
-        expect(await screen.findByText('Task 1')).toBeInTheDocument();
-      });
-
-      expect(screen.getByLabelText('Show:')).toHaveValue('20');
+      expect(await screen.findByLabelText('Show:')).toHaveValue('20');
     });
 
     test('updates pagination when "Tasks per Page" is changed', async () => {

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

@@ -1,4 +1,4 @@
-export const FIELDS = [
+export const EDITTASKDIALOG_FIELDS = [
   'description',
   'due',
   'start',
@@ -12,3 +12,18 @@ export const FIELDS = [
   'recur',
   'annotations',
 ] as const;
+
+export const ADDTASKDIALOG_FIELDS = [
+  'description',
+  'priority',
+  'project',
+  'due',
+  'start',
+  'end',
+  'entry',
+  'wait',
+  'recur',
+  'tags',
+  'annotations',
+  'depends',
+] as const;

frontend/src/components/utils/types.ts

@@ -1,4 +1,7 @@
-import { FIELDS } from '../HomeComponents/Tasks/constants';
+import {
+  ADDTASKDIALOG_FIELDS,
+  EDITTASKDIALOG_FIELDS,
+} from '../HomeComponents/Tasks/constants';
 
 export interface User {
   name: string;
@@ -115,6 +118,7 @@ export interface TaskFormData {
 }
 
 export interface AddTaskDialogProps {
+  onOpenChange: (open: boolean) => void;
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
   newTask: TaskFormData;
@@ -172,7 +176,17 @@ export interface UseTaskDialogKeyboardProps<F extends readonly string[]> {
   stopEditing: () => void;
 }
 
-export type FieldKey = (typeof FIELDS)[number];
+export type AddTaskProps<F extends readonly string[]> = {
+  fields: F;
+  focusedFieldIndex: number;
+  setFocusedFieldIndex: React.Dispatch<React.SetStateAction<number>>;
+  onEnter: (field: F[number]) => void;
+  closeDialog: () => void;
+};
+
+export type AddFieldKey = (typeof ADDTASKDIALOG_FIELDS)[number];
+
+export type FieldKey = (typeof EDITTASKDIALOG_FIELDS)[number];
 
 export type RefMap = Record<string, HTMLElement | null>;