focus task name on modal open

src/View/ChatPages/boardPage.tsx

@@ -12,6 +12,7 @@ import { SearchModal } from "../Modals/searchModal";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
+import { setFocusWithDelay } from "../utility";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
     boardViewModel.loadData();
@@ -49,6 +50,8 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             if (boardViewModel.selectedTaskViewModel.value == undefined) {
                 return <div></div>;
             } else {
+                setFocusWithDelay();
+
                 return TaskSettingsModal(
                     boardViewModel.selectedTaskViewModel.value,
                 );

src/View/ChatPages/calendarPage.tsx

@@ -8,6 +8,7 @@ import { MonthGrid } from "../Components/monthGrid";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
+import { setFocusWithDelay } from "../utility";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
     calendarPageViewModel.loadData();
@@ -95,6 +96,8 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
             ) {
                 return <div></div>;
             } else {
+                setFocusWithDelay();
+
                 return TaskSettingsModal(
                     calendarPageViewModel.selectedTaskViewModel.value,
                 );

src/View/Modals/taskSettingsModal.tsx

@@ -53,7 +53,7 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
                             <span>
                                 {translations.chatPage.task.taskNameLabel}
                             </span>
-                            <input bind:value={taskViewModel.name}></input>
+                            <input bind:value={taskViewModel.name} id="focused"></input>
                         </div>
                     </label>
 

src/View/utility.ts

@@ -9,3 +9,11 @@ export function allowDrag(event: DragEvent) {
 export function reload() {
     window.location.reload();
 }
+
+export function setFocus() {
+    document.getElementById("focused")?.focus();
+}
+
+export function setFocusWithDelay() {
+    setTimeout(setFocus, 100);
+}