Don't deselect selected element on click

Developers
1

Hi,

I’m working on an application that uses bpmn.io, and our users complain that the selected element is deselected when it is clicked on. They find this toggling behavior especially confusing as the dotted hover frame somehow indicates to them that the element is selected, which is isn’t. As a first step to improve usability, I would like to change the behavior of the modeler so that if an element is clicked that is already selected, it stays selected (maybe removing all other elements from the selection). Can anyone recommend a good way to achieve that?

I’m using bpmn.io embedded in a React application.

Any help or hint would be greatly appreciated!

Thank you,
Hans

2

Hi @hanshuebner,

you can add an event listener for element.click events and prevent the default behavior when the element is already selected. I created a code sandbox here:

There is probably a better way to figure out if the element is selected than using css classes, but the idea stays the same.

Hope this helps,
Martin

1 Like
3

Hi @Martin,

thank you so much, your solution works perfectly!

-Hans