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

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 {