Merge pull request #19144 from calixteman/no_focus_if_invisible

[Editor] Don't focus a newly added drawing if it isn't visible on screen

src/display/editor/draw.js

@@ -344,7 +344,9 @@ class DrawingEditor extends AnnotationEditor {
       this.#mustBeCommitted = false;
       this.commit();
       this.parent.setSelected(this);
-      this.div.focus();
+      if (this.isOnScreen) {
+        this.div.focus();
+      }
     }
   }
 

src/display/editor/editor.js

@@ -1402,6 +1402,12 @@ class AnnotationEditor {
     return this.div && !this.isAttachedToDOM;
   }
 
+  get isOnScreen() {
+    const { top, left, bottom, right } = this.getClientDimensions();
+    const { innerHeight, innerWidth } = window;
+    return left < innerWidth && right > 0 && top < innerHeight && bottom > 0;
+  }
+
   #addFocusListeners() {
     if (this.#focusAC || !this.div) {
       return;

test/integration/ink_editor_spec.mjs

@@ -612,4 +612,61 @@ describe("Ink Editor", () => {
       );
     });
   });
+
+  describe("Annotation mustn't take focus if it isn't visible", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the focus isn't taken", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToInk(page);
+
+          const rect = await getRect(page, ".annotationEditorLayer");
+
+          const x = rect.x + 20;
+          const y = rect.y + 20;
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(x, y);
+          await page.mouse.down();
+          await page.mouse.move(x + 50, y + 50);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+
+          await page.evaluate(() => {
+            window.focusedIds = [];
+            window.focusCallback = e => {
+              window.focusedIds.push(e.target.id);
+            };
+            window.addEventListener("focusin", window.focusCallback);
+          });
+
+          const oneToFourteen = Array.from(new Array(13).keys(), n => n + 2);
+          for (const pageNumber of oneToFourteen) {
+            await scrollIntoView(
+              page,
+              `.page[data-page-number = "${pageNumber}"]`
+            );
+          }
+
+          const ids = await page.evaluate(() => {
+            const { focusedIds, focusCallback } = window;
+            window.removeEventListener("focusin", focusCallback);
+            delete window.focusCallback;
+            delete window.focusedIds;
+            return focusedIds;
+          });
+
+          expect(ids).withContext(`In ${browserName}`).toEqual([]);
+        })
+      );
+    });
+  });
 });