editTextBlock results in stack overflow from FocusTrap

GoJS
1

Hi,
I’m attempting to call editTextBox like so:

const tb = node.findObject('nodeAnnotationText');
diagram.commandHandler.editTextBlock(tb as TextBlock);

When this is called from the node’s doubleClick handler it works fine.
When this is called from another project’s context menu, it results in a stack overflow error coming from FocusTrap.js:214

I’m trying to figure out how to avoid this error but have not been able to find a solution.
I have considered simulating the double click event to trigger the double click handler, but that seems like more of a hack than a solution.

2

This example here is what I was referring to in terms of simulating the double click event:

In that example, the double click event is triggered when clicking the button outside the canvas.
My situation is similar, except that my button outside the canvas has access to an instance of the diagram object, so I’m trying to call the code I referenced above to edit the text block from outside the canvas.

3

Is the behavior the same in both the Firefox and Chromium-based browsers?

When I try what I think is the scenario that you describe, I do not encounter any focus problems in either Firefox or Chrome. Here’s my app:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button id="myTestButton">Test</button>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { name: "TB", margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
],
[
  { from: 1, to: 2 },
]);

document.getElementById("myTestButton").addEventListener("click", e => {
    const node = myDiagram.nodes.first();
    const tb = node.findObject('TB');
    myDiagram.commandHandler.editTextBlock(tb);
  });
  </script>
</body>
</html>

My guess is that there is some other DOM event handler on the HTML page that is causing problems with focus changes.

4

Hi Walter,
Thanks for your example, it was very helpful.
You’re right, I’ve confirmed that this error only occurs when the context menu is visible on top of the canvas when attempting to call editTextBlock. While it’s not ideal for gojs to freeze up in this situation, I at least have a solution I can work towards.

5

So the context menu is implemented in HTML? Hmmm.

I suppose you could try calling that editTextBlock command “afterwards”, via:

  setTimeout(() => myDiagram.commandHandler.editTextBlock(. . .), 10);

or something like that.