TextBlock click event

I want to display a popup when an editable textblock is clicked. But it seems click is already assigned with event which opens editable area of text block , therefore it suppress click event. Is there any other way to display popup when text is clicked?

myDiagram.nodeTemplate =
$(go.Node, go.Panel.Vertical<span style="line-height: 1.4;">,</span>
  $(go.TextBlock,
    { margin: new go.Margin(3, 0, 0, 0),
        maxSize: new go.Size(100, 30),
        editable: true, isMultiline: false, click : showPopup
    },
    new go.Binding("text", "text")
  )
);

function showPopup(){
<span =“Apple-tab-span” style=“white-space:pre”> alert(‘popup shown’);
}

Yes, the text block editing prevents other events from firing (using event.preventDefault).

You’ll need to design your node so that these two bits of functionality don’t conflict. What are your expectations for the user, exactly?

Without knowing what they are, one way would be to put the click event on the Panel/Node, and give that Panel/Node a transparent background, so that it is clickable. This way, clicking on the text lets you edit the text, and clicking anywhere else in the Node shows the popup:

myDiagram.nodeTemplate =
$(go.Node, go.Panel.Vertical,
{ click : showPopup, areaBackground: ‘rgba(0,0,0,0)’ },
$(go.TextBlock,
{ margin: 6,
maxSize: new go.Size(100, 30),
editable: true, isMultiline: false
},
new go.Binding(“text”, “key”)
)
);


function showPopup(){
alert(‘popup shown’);
}