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

Author: lpranam

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
@@ -1525,6 +1526,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')

browser/src/canvas/sections/CommentSection.ts

@@ -1117,6 +1117,8 @@ export class Comment extends CanvasSectionObject {
 			this.removeLastBRTag(this.sectionProperties.nodeModifyText);
 			if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.innerText ||
 			    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)
@@ -1141,6 +1143,8 @@ export class Comment extends CanvasSectionObject {
 			return;
 		}
 		if (this.sectionProperties.nodeReplyText.innerText !== '') {
+			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)
@@ -1157,8 +1161,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) {

browser/src/map/Map.js

@@ -1442,6 +1442,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.