From d2176ff71296567c1e17285064faff3f5b11f1d1 Mon Sep 17 00:00:00 2001
From: Hikaru Y <hkrysg@gmail.com>
Date: Mon, 22 May 2023 12:57:39 +0900
Subject: [PATCH] Fix page scrolling when input box loses focus (#2508)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… if page content exceeds viewport.

- Set 'opacity' to 0 instead of setting 'left' to a large negative
  value to create an invisible but focusable button.
- Prevent page from scrolling by setting 'left/top' to the values
  of 'scrollX/scrollY'.
---
 ts/reviewer/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/reviewer/index.ts b/ts/reviewer/index.ts
index fddc940f2..afa10779c 100644
--- a/ts/reviewer/index.ts
+++ b/ts/reviewer/index.ts
@@ -245,7 +245,7 @@ export function _blockDefaultDragDropBehavior(): void {
 // https://github.com/ankitects/anki/issues/1952
 const dummyButton = document.createElement("button");
 dummyButton.style.position = "absolute";
-dummyButton.style.left = "-9999px";
+dummyButton.style.opacity = "0";
 document.addEventListener("focusout", (event) => {
     // Prevent type box from losing focus when switching IMEs
     if (!document.hasFocus()) {
@@ -254,6 +254,8 @@ document.addEventListener("focusout", (event) => {
 
     const target = event.target;
     if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+        dummyButton.style.left = `${window.scrollX}px`;
+        dummyButton.style.top = `${window.scrollY}px`;
         document.body.appendChild(dummyButton);
         dummyButton.focus();
         document.body.removeChild(dummyButton);