Click to select not working in MS Teams??

[dmb0058]

Introduction

This is really odd. I have a JointJS application that works fantastically standalone (typical "boxes and lines editor"), where clicking on a Rectangle or a Link selects it for editing, with highlight boundary and delete tool. I demo'd it via MS Teams tonight and it's as if Teams swallows the mouse click when you try to select any shape. I can drag the Rectangles around, just not click on them. The cursor is always the "4-pointed drag" shape.

Oddly, I have a circle on each Rectangle that's the drag zone for pulling a Link from one Rectangle to another, and clicking on those creates a Link from the Rectangle to itself.

I'll have to drill down but wondered if this was a recognised Teams "feature"??

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[dmb0058]

Doesn't help with an answer, but the application works fine in screenshare via Adobe Connect ... suggests Teams is eating the mouse click events

[kumilingus]

Have you tried to debugging it using the chrome inspect protocol?

[dmb0058]

I haven't, TBH I'm not sure what I'd be looking for.

Unless there's some way to force the JointJS canvas to the top of the stack by playing with the z-index or something, I suspect this is a Teams bug where clicks are not being propagated. I thought it odd that clicks all work fine on the other elements of the page that the diagram is embedded in (e.g. buttons, fields, etc.), so I added code like this to my event listeners:

Original:

paper.on('element:pointerclick', (elementView) => {
       highlightShape(blockShapes.find(o => o.shape.id === elementView.model.id), null);
   });

Changed to:

paper.on('element:pointerclick', (elementView, e) => {
       e.stopPropagation();
       e.preventDefault();
       highlightShape(blockShapes.find(o => o.shape.id === elementView.model.id), null);
   });

This had no effect so I've removed it.

[dmb0058]

OK, just an update ... it wasn't the Teams screenshare specifically, it was that I was accessing the session via RDP on a remote Windows box: Mac -> RDP -> Windows/Teams app sharing Chrome session.

If I use Chrome/Mac -> Teams app it works fine. It also works on Chrome/Mac via Teams browser session.

I guess there are just too many layers here to figure out which one is eating the mouse clicks on JointJS shapes, but I can't think of a way to circumvent it so happy to close this down.