langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix page scrolling when input box loses focus (#2508)

Browse Source 
… 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'.
This commit is contained in:
Hikaru Y 2023-05-22 12:57:39 +09:00 committed by GitHub
parent 6b1c799cbf
commit d2176ff712
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ts/reviewer/index.ts
View File

@ -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);