Concern with execution of TextEditor.hide in Gojs life cycle

GoJS
1

Hi,

On my node, I am displaying a list of data in a table row format and also filtering that data using input text in a search box.

Step 1: Filter the data by entering some keywords.
Step 2: Once the filtered data is visible, click on one of the filtered records to move to the next API/process.

Issue: Whenever the TextEditor is active and I try to click on a record, instead of triggering the record click, it executes the TextEditor.hide event.

Is there a way to execute both the TextEditor.hide event and the GoJS click event in a single action?

Please refer attached SS for more details.

image
image1053×834 60.2 KB

2

I haven’t had time to debug this, but I think something like this does some of what you are asking for:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2026 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
  <script id="code">
class ClickingTextEditingTool extends go.TextEditingTool {
  constructor(init) {
    super();
    if (init) Object.assign(this, init);
  }
  acceptText(reason) {
    super.acceptText(reason);
    if (reason === go.TextEditingAccept.MouseDown &&
        !(this.diagram.currentTool instanceof go.TextEditingTool)) {
      this.diagram.doMouseDown();
    }
  }
}

const myDiagram =
  new go.Diagram("myDiagramDiv", {
      textEditingTool: new ClickingTextEditingTool(),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

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: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>