Event sequence of buttons and custom text editors

I have a panel set up for users to enter a comment. Panel contains a textblock and two buttons labelled Cancel and Save. A custom editor textarea is wired up to the textblock.

The issue is that with the textedit active, the button-click events do not fire when the buttons are clicked.

My buttons are set up as

, CVS(“Button”, { margin: 2, click: ceancelButtonProcessor }, CVS(go.TextBlock, “Cancel”))
, CVS(“Button”, { margin: 2, click: saveButtonProcessor }, CVS(go.TextBlock, “Save”))

What I see is that when the custom text editor is showing, if I click the save button then the sequence of events is:

  1. Click save button
  2. myDiagram.addDiagramListener(‘TextEdited’) is fired.
  3. Button event function saveButtonProcessor () is not fired,
  4. A second click of the button will fire the saveButtonProcessor() function.


    This seems reasonable because, I assume, it is to do with the fact that the custom text editor is an html textarea element outside of the gojs canvas, and that the click ‘over’ the save button is treated as something like a ‘gotfocus’ event in the canvas.

Question: is there a handy setting, function or approach to have the saveButtonProcessor() function fired when the user clicks that button ? Maybe some kind of means for the ‘TextEdited’ event to pass on the click ?


In my research I tried the findObjectAt(myDiagram.lastInput.documentPoint) function with the aim of using that to recognise what button got clicked. The issue there was that although it worked, I don’t have an easy way to differentiate which button was clicked because the part returned is a TextBlock and because my app is intended to be multi-lingual I cannot rely on a consistent text value to use to differentiate buttons. An ID would be perfect there and could give me a viable workaround.