refactor(animated modal): add 'focusFirstInput' param to show function

frontend/src/ts/commandline/commandline.ts

@@ -55,7 +55,8 @@ export function show(
 ): void {
   void modal.show({
     ...modalShowSettings,
-    beforeAnimation: async (modal) => {
+    focusFirstInput: true,
+    beforeAnimation: async () => {
       mouseMode = false;
       inputValue = "";
       activeIndex = 0;
@@ -103,15 +104,8 @@ export function show(
       await showCommands();
       await updateActiveCommand();
       setTimeout(() => {
-        // instead of waiting for the animation to finish,
-        // we focus just after it begins to increase responsivenes
-        // (you can type while the animation is running)
-        modal.querySelector("input")?.focus();
         keepActiveCommandInView();
-      }, 0);
-    },
-    afterAnimation: async (modal) => {
-      modal.querySelector("input")?.focus();
+      }, 1);
     },
   });
 }

frontend/src/ts/modals/custom-word-amount.ts

@@ -6,14 +6,12 @@ import AnimatedModal from "../utils/animated-modal";
 
 export function show(): void {
   void modal.show({
+    focusFirstInput: true,
     beforeAnimation: async (modalEl) => {
       (
         modalEl.querySelector("input") as HTMLInputElement
       ).value = `${Config.words}`;
     },
-    afterAnimation: async (modalEl) => {
-      modalEl.querySelector("input")?.focus();
-    },
   });
 }
 

frontend/src/ts/utils/animated-modal.ts

@@ -19,6 +19,7 @@ type ConstructorCustomAnimations = {
 };
 
 export type ShowHideOptions = {
+  focusFirstInput?: boolean;
   animationMode?: "none" | "both" | "modalOnly";
   animationDurationMs?: number;
   customAnimation?: CustomWrapperAndModalAnimations;
@@ -151,7 +152,15 @@ export default class AnimatedModal {
       this.open = true;
       this.wrapperEl.showModal();
 
-      await options?.beforeAnimation?.(this.modalEl);
+      //wait until the next event loop to allow the dialog to start animating
+      setTimeout(async () => {
+        if (options?.focusFirstInput) {
+          this.modalEl.querySelector("input")?.focus();
+        } else {
+          this.wrapperEl.focus();
+        }
+        await options?.beforeAnimation?.(this.modalEl);
+      }, 0);
 
       const modalAnimation =
         options?.customAnimation?.modal ?? this.customShowAnimations?.modal;
@@ -197,7 +206,6 @@ export default class AnimatedModal {
             animationMode === "none" ? 0 : wrapperAnimationDuration,
             wrapperAnimation.easing ?? "swing",
             async () => {
-              this.wrapperEl.focus();
               await options?.afterAnimation?.(this.modalEl);
               resolve();
             }