From d5165f137c2cb1b3ead53b02ff8a615a74cce06f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 7 Mar 2023 15:08:04 +0100
Subject: [PATCH] updating words input position each time user moves to the
 next word to move the IME suggestion box only shows up in japanese, korean
 and chinese languages for now (not sure which other languages use this)
 closes #4022

---
 frontend/src/styles/test.scss   |  6 +-----
 frontend/src/ts/test/test-ui.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index f40c28dfd..e86a9d43b 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -400,14 +400,10 @@
   outline: none;
   display: block;
   resize: none;
-  position: fixed;
+  position: absolute;
   z-index: -1;
   cursor: default;
   pointer-events: none;
-  margin-left: 1rem;
-  // left: 50%;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
 }
 
 #capsWarning {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index eeee40847..a4a4e0499 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -131,6 +131,7 @@ export function updateActiveElement(backspace?: boolean): void {
       });
     }
   } catch (e) {}
+  updateWordsInputPosition();
 }
 
 function getWordHTML(word: string): string {
@@ -188,6 +189,30 @@ export function showWords(): void {
   $("#words").html(wordsHTML);
 
   updateWordsHeight();
+  updateWordsInputPosition(true);
+}
+
+const posUpdateLangList = ["japanese", "chinese", "korean"];
+export function updateWordsInputPosition(force = false): void {
+  const shouldUpdate = posUpdateLangList.some((l) =>
+    Config.language.startsWith(l)
+  );
+
+  if (!force && !shouldUpdate) return;
+
+  const el = document.querySelector("#wordsInput") as HTMLElement;
+  const activeWord = document.querySelector(
+    "#words .active"
+  ) as HTMLElement | null;
+
+  if (!shouldUpdate || !activeWord) {
+    el.style.top = "0px";
+    el.style.left = "0px";
+    return;
+  }
+
+  el.style.top = activeWord.offsetTop + "px";
+  el.style.left = activeWord.offsetLeft + "px";
 }
 
 export function updateWordsHeight(): void {
@@ -711,6 +736,7 @@ export function lineJump(currentTop: number): void {
     }
   }
   currentTestLine++;
+  updateWordsInputPosition();
 }
 
 export function arrangeCharactersRightToLeft(): void {