diff --git a/src/display/editor/comment.js b/src/display/editor/comment.js index 689d0876c..0ed94aad4 100644 --- a/src/display/editor/comment.js +++ b/src/display/editor/comment.js @@ -71,6 +71,12 @@ class Comment { return this.#render(button, true); } + focusButton() { + setTimeout(() => { + (this.#commentStandaloneButton ?? this.#commentToolbarButton)?.focus(); + }, 0); + } + onUpdatedColor() { if (!this.#commentStandaloneButton) { return; diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 65b86094c..2f62013dd 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -1162,6 +1162,10 @@ class AnnotationEditor { return this.#altText?.hasData() ?? false; } + focusCommentButton() { + this.#comment?.focusButton(); + } + addCommentButton() { return (this.#comment ||= new Comment(this)); } diff --git a/test/integration/comment_spec.mjs b/test/integration/comment_spec.mjs index 49da1a674..b732b015c 100644 --- a/test/integration/comment_spec.mjs +++ b/test/integration/comment_spec.mjs @@ -14,7 +14,9 @@ */ import { + awaitPromise, closePages, + createPromise, dragAndDrop, getEditorSelector, getRect, @@ -301,6 +303,71 @@ describe("Comment", () => { }); }); + describe("Focused element after editing", () => { + let pages; + + beforeEach(async () => { + pages = await loadAndWait( + "tracemonkey.pdf", + ".annotationEditorLayer", + "page-width", + null, + { enableComment: true } + ); + }); + + afterEach(async () => { + await closePages(pages); + }); + + it("must check that the focus is moved on the comment button", async () => { + await Promise.all( + pages.map(async ([browserName, page]) => { + await switchToHighlight(page); + + const rect = await getSpanRectFromText(page, 1, "Languages"); + const x = rect.x + rect.width / 2; + const y = rect.y + rect.height / 2; + await page.mouse.click(x, y, { count: 2, delay: 100 }); + await page.waitForSelector(getEditorSelector(0)); + + const commentButtonSelector = `${getEditorSelector(0)} button.comment`; + await waitAndClick(page, commentButtonSelector); + + await page.waitForSelector("#commentManagerCancelButton", { + visible: true, + }); + const handle = await createPromise(page, resolve => { + document + .querySelector("button.comment") + .addEventListener("focus", resolve, { once: true }); + }); + await page.click("#commentManagerCancelButton"); + await awaitPromise(handle); + + await waitAndClick(page, commentButtonSelector); + + const textInputSelector = "#commentManagerTextInput"; + await page.waitForSelector(textInputSelector, { + visible: true, + }); + await page.type(textInputSelector, "Hello world!"); + + await page.click("#commentManagerSaveButton"); + await page.waitForSelector("button.annotationCommentButton", { + visible: true, + }); + + await page.waitForFunction( + sel => document.activeElement === document.querySelector(sel), + {}, + "button.annotationCommentButton" + ); + }) + ); + }); + }); + describe("Comment sidebar", () => { let pages; diff --git a/web/comment_manager.js b/web/comment_manager.js index f995f0a4e..128b57936 100644 --- a/web/comment_manager.js +++ b/web/comment_manager.js @@ -851,16 +851,18 @@ class CommentDialog { } #finish() { + this.#editor?.focusCommentButton(); + this.#editor = null; this.#textInput.value = this.#previousText = this.#commentText = ""; this.#overlayManager.closeIfActive(this.#dialog); this.#textInput.style.height = ""; this.#uiManager?.addEditListeners(); this.#uiManager = null; - this.#editor = null; } destroy() { this.#uiManager = null; + this.#editor = null; this.#finish(); } }