switching to style manager causes permanent (black) border on selecting elements

Using latest stable Grapes + Grapes preset webpage.

Steps to reproduce

1. go to https://jsfiddle.net/szLp8h4n/101/
2. select the text element
3. deselect the text element
4. notice the permanent black border appearing:

The expected behavior is that there is no black border when deselecting the element.

Note that this behavior is fixed by removing the logic that automatically opens the style manager when selecting a component:

Therefore there seems to be a bug when changing the active state of a view.

[xamdam777]

@artf I think that this problem is only partially solved. Please, check this screencast, you will see a related rgb border bug in the current grapesjs demo https://screencast-o-matic.com/watch/cFf3DbbiN6

I have created a new issue here

[xamdam777]

I got working a dirty workaround and this is my current best solution based on @tommedema suggestion.

Just remove the “border” property from the decoration tab and add border-top, bottom, right and left instead.

buildProps: ["opacity", "background-color", "border-radius", "box-shadow", "background", "border-top", "border-bottom", "border-left", "border-right"],

This will completely remove the bugged border property and add 4 new properties.

The bad part of this workaround is that you will need to customize the new border properties by hand:

5px solid rgb(220, 22, 22)

Something like that will appear in every border text field, so your users will not have a color picker.

Maybe I’ll try to code my own color picker for the borders. I am afraid that if I use the default grapesjs one, it can be hard to achieve and that crazy bug may come back.