#2405 Toolbar buttons focus lost when enableKeyboardNavigation is ena…

canvas_modules/common-canvas/src/common-canvas/canvas-controller.js

@@ -1926,6 +1926,8 @@ export default class CanvasController {
 	// ---------------------------------------------------------------------------
 
 	restoreFocus() {
+		this.logger.log("restoreFocus - " + CanvasUtils.getFocusName(this.focusObject));
+
 		if (this.getSVGCanvasD3()) {
 			this.setFocusObject(this.focusObject); // This will force a refresh of the focus
 		}
@@ -1946,6 +1948,8 @@ export default class CanvasController {
 	}
 
 	setFocusObject(focusObj) {
+		this.logger.log("setFocusObject focusObject = " + CanvasUtils.getFocusName(focusObj));
+
 		this.focusObject = focusObj;
 
 		if (this.focusObject && this.canvasContents) {
@@ -2850,9 +2854,12 @@ export default class CanvasController {
 		// a getFocusObject method. In other cases, the focus will remain
 		// in its current location.
 		if (this.getCanvasConfig().enableKeyboardNavigation) {
-			if (command?.getFocusObject) {
+			if (data.editSource !== "toolbar" &&
+				command?.getFocusObject) {
 				const focusObject = command.getFocusObject();
 
+				this.logger.log("Focus object from " + data.editType + " command = " + CanvasUtils.getFocusName(focusObject));
+
 				if (focusObject === CANVAS_FOCUS) {
 					this.setFocusOnCanvas();
 

canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx

@@ -296,10 +296,13 @@ class CanvasContents extends React.Component {
 	// When focus leaves the canvas it may be going to an "internal" object
 	// such as a node or a comment or to an "external" object like the
 	// toolbar or palette. If it goes outside the canvas, we reset the
-	// tab object index so that tabbing will begin from the first tab object.
+	// tab object index so that tabbing will begin from the first tab object
+	// and set the current canvas focus object to null to prevent any
+	// restoreFocus calls setting focus back into the canvas.
 	onBlur(evt) {
 		if (!this.isTargetInsideCanvas(evt.relatedTarget)) {
 			this.svgCanvasD3.resetTabObjectIndex();
+			this.props.canvasController.setFocusObject(null);
 		}
 	}
 

canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js

@@ -24,6 +24,7 @@ import { get, has, isNumber, set } from "lodash";
 import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK,
 	LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST,
 	PORT_DISPLAY_IMAGE, PORT_WIDTH_DEFAULT, PORT_HEIGHT_DEFAULT,
+	CANVAS_FOCUS
 } from "../common-canvas/constants/canvas-constants.js";
 
 export default class CanvasUtils {
@@ -1103,21 +1104,21 @@ export default class CanvasUtils {
 		return "";
 	}
 
-	// Returns truthy if the object passed in is a node (and not a comment).
-	// Comments don't have a type property.
+	// Returns true if the object passed in is a node.
 	static isNode(obj) {
-		return obj.type && !this.isLink(obj);
+		return !this.isLink(obj) && !this.isComment(obj);
 	}
 
 	// Returns true if the object passed in is a link.
 	static isLink(obj) {
 		return obj.type && (obj.type === NODE_LINK || obj.type === COMMENT_LINK || obj.type === ASSOCIATION_LINK);
 	}
 
-	// Returns truthy if the object passed in is a comment.
-	// Comments don't have a type property but do have content.
+	// Returns true if the object passed in is a comment.
+	// Comments don't have a type property but do have content
+	// which might be an empty string, so check it is defined.
 	static isComment(obj) {
-		return !obj.type && obj.content;
+		return !obj.type && typeof obj.content !== "undefined";
 	}
 
 	static isSupernode(node) {
@@ -1761,4 +1762,15 @@ export default class CanvasUtils {
 
 		return newLayout;
 	}
+
+	// Returns a text string to represent the focus object passed in.
+	static getFocusName(focusObject) {
+		if (focusObject) {
+			if (focusObject === CANVAS_FOCUS) {
+				return CANVAS_FOCUS;
+			}
+			return this.getObjectTypeName(focusObject) + " ID = " + focusObject.id;
+		}
+		return "Undefined Object";
+	}
 }

canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js

@@ -316,6 +316,7 @@ export default class SVGCanvasRenderer {
 		// Restore the focus back to whatever object is currently in focus if
 		// keyboard navigation is enabled.
 		if (this.config.enableKeyboardNavigation) {
+			this.logger.log("setCanvasInfoRenderer - Restoring focus");
 			this.restoreFocus();
 		}
 
@@ -5950,6 +5951,8 @@ export default class SVGCanvasRenderer {
 	// viewport if it is not already.
 	// This is a utility method called from the canvas controller.
 	moveFocusTo(obj) {
+		this.logger.log("moveFocusTo - " + CanvasUtils.getFocusName(obj));
+
 		if (!obj || obj === CANVAS_FOCUS) {
 			return;
 		}
@@ -5959,28 +5962,45 @@ export default class SVGCanvasRenderer {
 		this.canvasGrp.selectAll(".d3-focus-path").remove();
 
 		let objSel = null;
-		if (type === "node" && this.activePipeline.getNode(obj.id)) {
-			objSel = this.getNodeGroupSelectionById(obj.id);
-
-			objSel.insert("path", ":first-child")
-				.attr("class", "d3-focus-path")
-				.attr("d", (d) => this.getNodeShapePathSizing(d));
+		if (type === "node") {
+			if (this.activePipeline.getNode(obj.id)) {
+				objSel = this.getNodeGroupSelectionById(obj.id);
 
+				objSel.insert("path", ":first-child")
+					.attr("class", "d3-focus-path")
+					.attr("d", (d) => this.getNodeShapePathSizing(d));
+			} else {
+				// This may happen when objects are being created.
+				this.logger.log("Node with ID " + obj.id + " not found in activePipeline");
+				return;
+			}
 
-		} else if (type === "comment" && this.activePipeline.getComment(obj.id)) {
-			objSel = this.getCommentGroupSelectionById(obj.id);
+		} else if (type === "comment") {
+			if (this.activePipeline.getComment(obj.id)) {
+				objSel = this.getCommentGroupSelectionById(obj.id);
 
-			objSel.insert("rect", ":first-child")
-				.attr("class", "d3-focus-path")
-				.attr("x", -this.canvasLayout.commentSizingArea)
-				.attr("y", -this.canvasLayout.commentSizingArea)
-				.attr("height", (c) => c.height + (2 * this.canvasLayout.commentSizingArea))
-				.attr("width", (c) => c.width + (2 * this.canvasLayout.commentSizingArea));
+				objSel.insert("rect", ":first-child")
+					.attr("class", "d3-focus-path")
+					.attr("x", -this.canvasLayout.commentSizingArea)
+					.attr("y", -this.canvasLayout.commentSizingArea)
+					.attr("height", (c) => c.height + (2 * this.canvasLayout.commentSizingArea))
+					.attr("width", (c) => c.width + (2 * this.canvasLayout.commentSizingArea));
+			} else {
+				// This may happen when objects are being created.
+				this.logger.log("Comment with ID " + obj.id + " not found in activePipeline");
+				return;
+			}
 
-		} else if (type === "link" && this.activePipeline.getLink(obj.id)) {
-			objSel = this.getLinkGroupSelectionById(obj.id);
+		} else if (type === "link") {
+			if (this.activePipeline.getLink(obj.id)) {
+				objSel = this.getLinkGroupSelectionById(obj.id);
 
-			// TODO - Think of a way to show focus on links other than line thckness
+				// TODO - Think of a way to show focus on links other than line thckness
+			} else {
+				// This may happen when objects are being created.
+				this.logger.log("Link with ID " + obj.id + " not found in activePipeline");
+				return;
+			}
 		}
 
 		// If there is a non-null D3 selection object that is not empty,
@@ -5993,6 +6013,7 @@ export default class SVGCanvasRenderer {
 
 			const element = objSel.node();
 			if (element) {
+				this.logger.log("moveFocusTo - set focus on element");
 				element.focus();
 			}