Canvas object swallows click events

GoJS
1

Hi, we’re working with GoJS and angular and our ngbDropdown relies on user click events to close the dropdowns. Clicking anywhere on the canvas should hide our dropdowns but it seems GoJS is cancelling the event bubble. Do you know of a workaround for this behaviour?

clickissue

2

If you just want to handle clicks in the background of the diagram, I suppose you could do something like:

myDiagram.click = e => e.diagram.lastInput.event.bubbles = true;

But I haven’t tested to make sure it will work in all situations, including touch and stylus events.

By the way, a mouse-down event in a GoJS Diagram will cause it to receive focus.

3

.bubbles seems to be read only so that doesnt even compile for me but when you mentioned focus that led me to using this instead on click event → this.diagram.focus(); which seems to work for now.

4

@walter I got excited too quick. I rebuilt my project completely and I still get the same issue where even when forcing focus to canvas on click events my dropdown remains open. Seems that somewhere in the GoJs source there is .stopPropagation() call on the click event which causes the ngbDropdown’s event listener to not be called.

5

Try setting the InputEvent.bubbles to true. This seems to be an undocumented property, but it’s in the go.d.ts file.

myDiagram.click = e => e.diagram.lastInput.bubbles = true
6

I tried using .bubbles = true but still no difference unfortunately, I’m gonna keep investigating the issue see if I can find something.

7

I have the exact same problem. Did you find a solution?

8

@warren.reed nope I have not, we’ve lowered the bug priority for now. A quick bandaid would be to manually hide the dropdown using jquery on backgroundClicked event. This solution assumes the dropdown css class names are gonna remain static and could break.

this.diagram.addDiagramListener('BackgroundSingleClicked', () => {
       $('.dropdown').removeClass('show');
       $('.dropdown-menu').removeClass('show');
    });
9

I just tried the simplest experiment – a click event handler on an HTML element holding a Div hosting a GoJS Diagram. The details of the diagram actually don’t matter.

  <div onclick="alert('clicked')">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  </div>

Whenever the user clicks in the diagram, they see that alert.

I had not done anything about click events in the diagram, i.e. I had not added any Diagram.click event handler.

Presumably you could do something similar and hide any dropdowns.