fix(wordsInput): prevent automatic scrolling when focusing #wordsInput (@nadalaba) (#6724)

fix #6723

Author: nadalaba

frontend/src/ts/test/test-logic.ts

@@ -310,7 +310,7 @@ export function restart(options = {} as RestartOptions): void {
     async () => {
       $("#result").addClass("hidden");
       $("#typingTest").css("opacity", 0).removeClass("hidden");
-      $("#wordsInput").val(" ");
+      $("#wordsInput").css({ left: 0 }).val(" ");
 
       if (Config.language.startsWith("korean")) {
         koInputVisual.innerText = " ";

frontend/src/ts/test/test-ui.ts

@@ -438,10 +438,7 @@ function updateWordWrapperClasses(): void {
 
   updateWordsWidth();
   updateWordsWrapperHeight(true);
-  updateWordsMargin();
-  setTimeout(() => {
-    void updateWordsInputPosition(true);
-  }, 250);
+  updateWordsMargin(updateWordsInputPosition, [true]);
 }
 
 export function showWords(): void {
@@ -637,9 +634,16 @@ export function updateWordsWrapperHeight(force = false): void {
   outOfFocusEl.style.maxHeight = wordHeight * 3 + "px";
 }
 
-function updateWordsMargin(): void {
+function updateWordsMargin<T extends unknown[]>(
+  afterCompleteFn: (...args: T) => void,
+  args: T
+): void {
+  const afterComplete = (): void => {
+    afterCompleteFn(...args);
+    void updateHintsPositionDebounced();
+  };
   if (Config.tapeMode !== "off") {
-    void scrollTape(true, updateHintsPositionDebounced);
+    void scrollTape(true, afterComplete);
   } else {
     const wordsEl = document.getElementById("words") as HTMLElement;
     const afterNewlineEls =
@@ -653,7 +657,7 @@ function updateWordsMargin(): void {
         {
           duration: SlowTimer.get() ? 0 : 125,
           queue: "leftMargin",
-          complete: updateHintsPositionDebounced,
+          complete: afterComplete,
         }
       );
       jqWords.dequeue("leftMargin");
@@ -665,7 +669,7 @@ function updateWordsMargin(): void {
       for (const afterNewline of afterNewlineEls) {
         afterNewline.style.marginLeft = `0`;
       }
-      void updateHintsPositionDebounced();
+      afterComplete();
     }
   }
 }