annotation: refocus comments on tab getting focus

problem: if user was editing comment and switched tab/window, on returning to tab document will gain focus instead of comment and user accidentally type in doc instead of comment Signed-off-by: Pranam Lashkari <[email protected]> Change-Id: I356f311461010fc191620ac489f6b3bc65434e2b
CollaboraOnline · Jan 10, 2025 · d22db81 · d22db81
1 parent c6160f0
commit d22db81
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/browser/src/canvas/sections/CommentListSection.ts b/browser/src/canvas/sections/CommentListSection.ts
@@ -87,6 +87,7 @@ export class CommentSection extends app.definitions.canvasSectionObject {
 
 	map: any;
 	static autoSavedComment: cool.Comment;
+	static needFocus: cool.Comment;
 	static commentWasAutoAdded: boolean = false;
 	static pendingImport: boolean = false;
 	static importingComments: boolean = false; // active during comments insertion, disable scroll
@@ -1517,6 +1518,9 @@ export class CommentSection extends app.definitions.canvasSectionObject {
 				if (autoSavedComment) {
 					var isOurComment = annotation.isAutoSaved();
 					if (isOurComment) {
+						if (app.definitions.CommentSection.needFocus) {
+							app.definitions.CommentSection.needFocus = annotation;
+						}
 						annotation.sectionProperties.container.style.visibility = 'visible';
 						annotation.sectionProperties.autoSave.innerText = _('Autosaved');
 						if (this.sectionProperties.docLayer._docType === 'spreadsheet')

diff --git a/browser/src/canvas/sections/CommentSection.ts b/browser/src/canvas/sections/CommentSection.ts
@@ -1093,6 +1093,8 @@ export class Comment extends CanvasSectionObject {
 			this.removeBRTag(this.sectionProperties.nodeModifyText);
 			if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.textContent ||
 			    this.sectionProperties.contentText.origHTML !== this.sectionProperties.nodeModifyText.innerHTML) {
+if(!document.hasFocus())
+					app.definitions.CommentSection.needFocus = this;
 				if (!this.sectionProperties.contentText.uneditedHTML)
 					this.sectionProperties.contentText.uneditedHTML = this.sectionProperties.contentText.origHTML;
 				if (!this.sectionProperties.contentText.uneditedText)
@@ -1117,6 +1119,8 @@ export class Comment extends CanvasSectionObject {
 			return;
 		}
 		if (this.sectionProperties.nodeReplyText.textContent !== '') {
+			if(!document.hasFocus())
+				app.definitions.CommentSection.needFocus = this;
 			if (!this.sectionProperties.contentText.uneditedHTML)
 				this.sectionProperties.contentText.uneditedHTML = this.sectionProperties.contentText.origHTML;
 			if (!this.sectionProperties.contentText.uneditedText)
@@ -1131,8 +1135,8 @@ export class Comment extends CanvasSectionObject {
 
 	public focus (): void {
 		this.sectionProperties.container.classList.add('annotation-active');
-		this.sectionProperties.nodeModifyText.focus();
-		this.sectionProperties.nodeReplyText.focus();
+		this.sectionProperties.nodeModifyText.focus({ focusVisible: true });
+		this.sectionProperties.nodeReplyText.focus({ focusVisible: true });
 
 		// set cursor at the last position on refocus after autosave
 		if (this.isModifying() && this.sectionProperties.nodeModifyText.childNodes.length > 0) {

diff --git a/browser/src/map/Map.js b/browser/src/map/Map.js
@@ -1433,6 +1433,13 @@ L.Map = L.Evented.extend({
 		}
 
 		app.idleHandler._activate();
+
+		if (app.definitions.CommentSection.needFocus)
+		{
+			app.definitions.CommentSection.needFocus.focus();
+			app.sectionContainer.getSectionWithName(L.CSections.CommentList.name).select(app.needFocus)
+			app.definitions.CommentSection.needFocus = null;
+		}
 	},
 
 	// Event to change the focus to dialog or editor.