When TextBlock is in editing mode (focus mode), clicking on the input box outside the canvas will not focus at this time. How can I make the input box focus?
“gojs”: “^2.3.10”,
I do not understand the situation that you are trying to describe. Could you please show screenshots and for each one describe the action that produced it?
I have found the problem I want to describe. May I ask if there is a latest solution now?
I do not understand the problem that you have. Please explain it in a manner that I can understand. Then perhaps I can talk about solutions.
It would help a lot if you could provide a stand-alone sample that I can run to demonstrate the exact situation showing the problem, and if you could describe the undesired behavior as well as the behavior that you want instead.
TextBox remains in edit mode if clicking outside of diagram.
The version I’m using is “gojs” : “^2.3.10”.
May I ask if there are any new solutions now
Normally while in-place editing is happening focus is in the input HTML element. It is all implemented by the TextEditingTool combined with the particular text editor code associated with the HTMLInfo for the HTML element. HTML Interaction | GoJS and
HTML Interaction | GoJS
The TextEditingTool also does text validation. If validation fails, focus is kept in the text editor. Normally that case is shown with a red border. There are examples showing how to manage that. Validation | GoJS
This is a case I wrote. When the TextBlock is being edited, click on . At this time, the element is unfocused. In my project, when I click <input / >, I need to focus and unedit the TextBlock. How can I solve this problem?
I’m Chinese. gojs was used in the company’s project. My English proficiency is not good. I use translation tools for communication. This is my Chinese. I hope it will be helpful for our conversation
这是我写的一个案例，当 TextBlock 处于编辑时，点击 ， 此时 <input / > 元素是不可聚焦的。我的项目中需要点击 <input / > 时可以聚焦并且 TextBlock 取消编辑状态，请问这个问题怎么解决？
Are you using a Chromium or webkit browser? Have you tried Firefox? They have different behaviors. Here’s a sample that demonstrates the differences along with ways of addressing the problem:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
<script id="code">
function init() {
myDiagram = new go.Diagram("myDiagramDiv");
myDiagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape({ fill: "white" })
.bind("fill", "color"),
new go.TextBlock({ margin: 8, editable: true })
.bindTwoWay("text")
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "red" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
document.getElementById("myStuff").addEventListener("focusin", e => {
if (myDiagram.currentTool instanceof go.TextEditingTool) {
myDiagram.currentTool.acceptText(go.TextEditingTool.MouseDown);
alert("focusin")
}
});
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:200px"></div>
Behavior in Chromium and Safari are different than in Firefox. Problem is that while editing,
clicking or dragging in a different HTML textarea doesn't do anything in Chromium or Safari but does in Firefox.
Work-around by changing the text editor's "blur" listener's behavior and (optionally)
call TextEditingTool.acceptText in a "focusin" listener.
The work-around doesn't work in Safari -- the "focusin" event doesn't happen (not allowed?).
<textarea id="mySavedModel" style="width:100%;height:50px">
focus here doesn't acceptText
</textarea>
<div id="myStuff">
<textarea id="mySavedModel2" style="width:100%;height:50px">
focus here does call acceptText
</textarea>
</div>
</body>
</html>
I’m using Chrome. When editing with TextBlock, clicking on input does not trigger the focusin event.
How to solve this problem in Chrome
The code I just posted in my previous reply reproduces the problem and demonstrates solutions. Are you saying that it doesn’t work for you? I cannot explain that. Are we talking about different problems?