From 59bcfd9b9e25e8ddc78ad622b9ea8c5a8857d144 Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Thu, 27 Jul 2023 13:04:14 +0200 Subject: [PATCH] [Editor] Blur unselected editors When an editor is selected in using the keyboard then it has the focus. But then if the editor is unselected with Escape key then the focus must be removed otherwise we still have a blue outline around it. And add few missing timeout in the integration tests. --- src/display/editor/editor.js | 5 +++++ test/integration/freetext_editor_spec.js | 27 +++++++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 6edee9234..0ec5ce85e 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -972,6 +972,11 @@ class AnnotationEditor { unselect() { this.#resizersDiv?.classList.add("hidden"); this.div?.classList.remove("selectedEditor"); + if (this.div?.contains(document.activeElement)) { + // Don't use this.div.blur() because we don't know where the focus will + // go. + this.parent.div.focus(); + } } /** diff --git a/test/integration/freetext_editor_spec.js b/test/integration/freetext_editor_spec.js index 69855fcf8..88f62254d 100644 --- a/test/integration/freetext_editor_spec.js +++ b/test/integration/freetext_editor_spec.js @@ -81,6 +81,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(0)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(0), el => { @@ -176,6 +177,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(3)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(3), el => { @@ -282,6 +284,7 @@ describe("FreeText Editor", () => { stacksRect.x + stacksRect.width + 1, stacksRect.y + stacksRect.height / 2 ); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(7)} .internal`, data); // Commit. @@ -312,6 +315,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(8)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(8), el => { @@ -464,6 +468,7 @@ describe("FreeText Editor", () => { editorRect.y + editorRect.height / 2, { clickCount: 2 } ); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(9)} .internal`, "A"); // Commit. @@ -511,6 +516,7 @@ describe("FreeText Editor", () => { rect.x + (i + 1) * 100, rect.y + (i + 1) * 100 ); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(i)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(i), el => { @@ -688,6 +694,7 @@ describe("FreeText Editor", () => { const data = `Hello PDF.js World !! on page ${pageNumber}`; expected.push(data); await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(currentId)} .internal`, data); // Commit. @@ -809,6 +816,7 @@ describe("FreeText Editor", () => { const x = rect.x + 0.1 * rect.width; const y = rect.y + 0.1 * rect.height; await page.mouse.click(x, y); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(currentId)} .internal`, data); // Commit. @@ -820,6 +828,18 @@ describe("FreeText Editor", () => { }); currentId += 1; await page.waitForTimeout(10); + await page.waitForSelector( + ".page[data-page-number='1'] .canvasWrapper", + { + timeout: 0, + } + ); + await page.waitForSelector( + ".page[data-page-number='1'] .annotationEditorLayer:not([hidden])", + { + timeout: 0, + } + ); } const serialize = proprName => @@ -1060,7 +1080,7 @@ describe("FreeText Editor", () => { editorRect.x + editorRect.width / 2, editorRect.y + editorRect.height / 2 ); - + await page.waitForTimeout(10); await page.keyboard.press("Backspace"); await page.waitForTimeout(10); @@ -1256,6 +1276,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(0)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(0), el => { @@ -1361,6 +1382,7 @@ describe("FreeText Editor", () => { const data = `Hello PDF.js World !! on page ${pageNumber}`; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(currentId)} .internal`, data); // Commit. @@ -1721,6 +1743,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(0)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(0), el => { @@ -1791,6 +1814,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 200, rect.y + 200); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(0)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(0), el => { @@ -1917,6 +1941,7 @@ describe("FreeText Editor", () => { const data = "Hello PDF.js World !!"; await page.mouse.click(rect.x + 100, rect.y + 100); + await page.waitForTimeout(10); await page.type(`${getEditorSelector(1)} .internal`, data); const editorRect = await page.$eval(getEditorSelector(1), el => {