mouse - Weird behavior for textarea in diagrams.net (draw.io) format panel

Question

I'm facing a very weird (& blocking) issue using diagrams.net webapp.

I'm trying to add some nodes in the Format Panel. I created a new tab in this panel & added in it some new inputs. There are text inputs, checkbox inputs & textarea.

But the behavior is absolutely not the expected one. For text & cb inputs, everything works fine, but textareas behavior is... at least very weird:

1. The field can't get focus by mouse clicking (remember that click works on other inputs). The only way to set the focus on it is by using JS focus() method.
2. Text inside the tag can't be selected by mouse. If element has the focus, text can be updated. Moreover, even if text can be changed, text cursor cannot move from the end of the text.
3. Textarea box is not resizable. There is the bottom-right arrow to resize it & I added the "resize" value to be sure but the feature doesn't disable but I juste can't. BUT ! If I set the attribute "disabled" then I can resize the box. Unfortunately, I can't disable the textarea since I want to put it because I need to write in it.

I can't show you code for now (it's just a new node creation using document.createElement) but you can easily test this: go to drawio webapp & when the webapp is loaded, use the Inspector in the developer tools to add a new textarea node in the format panel (div with ".geFormatContainer" class) : element is not focusable with the mouse, text inside it is unselectable & box is not resizable as long as "disabled" attribute is not set.

I added a click listener in the component to check if click did something & it does, but it doesn't give the focus to the element (document.activeElement says that body is focused -_-) so I think there is something in mxgraph which avoids the element's classic behavior. But what ?

question from:https://stackoverflow.com/questions/66051392/weird-behavior-for-textarea-in-diagrams-net-draw-io-format-panel

Answer 1

Waitting for answers