MultilineInput - Not sized properly when workspace is loaded.

[nanhishweta-26]

Hi Team,

As shown in the below screenshots, when the Workspace is cleared and loaded

Multiline block is not sized properly to show all the text within the block as seen in Image1.

But, if we try to edit the block the multiline block is resized to accommodate the text as seen in Image 2. Also, afterwards it retains the size.

Image 1:

Image 2:

Any help is much appreciated.

Thanks,
Shweta

[maribethb]

Hi, I'm not able to reproduce this. Can you provide more detailed reproduction steps? How are you clearing and reloading the workspace?

Thanks!

[nanhishweta-26]

This is the code to reproduce the bug. Please review and let us know if you need any more details.

`blocklyWorkspace.clear();

var workspaceJSONValue =
{
"blocks": {
"languageVersion": 0,
"blocks": [
{
"type": "modify_form",
"id": "4PMzIgAFVO2s_-m?$:1d",
"x": 10,
"y": 10,
"inputs": {
"modify_form": {
"block": {
"type": "variables_set",
"id": "ud4J|#g9tWCPdL?gO,(K",
"fields": {
"VAR": {
"id": "zFF)Ar@[ZdrIxEL}n)Ao"
}
},
"inputs": {
"VALUE": {
"block": {
"type": "text_multiline",
"id": "|YCm`eZO3k?7g/dw0hb(",
"fields": {
"TEXT": "This is a very long message"
}
}
}
}
}
}
}
}
]
},
"variables": [
{
"name": "Message",
"id": "zFF)Ar@[ZdrIxEL}n)Ao"
}
]
}

Blockly.serialization.workspaces.load(workspaceJSONValue, blocklyWorkspace);`

[Juliandebruin]

Is there a workaround for now? I am having the same issue.

[shals1031]

Hi Blockly team

Even we are facing the same issue in our environment, any plans as to when this fix can be provided or do we any work around for the same.
Expecting as always quick response from your side

[ionous]

I've encountered this on Windows 10 using Chrome 104.0.5112.102, Firefox 104.0.1, and Edge 104.0.1293.70.

The reason is that textElement.getComputedTextLength() in Blockly.utils.dom.getTextWidth() called by Blockly.FieldMultilineInput.updateSize_() returns 0 because the svg element isn't rendered yet ( Node.isConnected is still false )

re: bugzilla "SVGTextElement.getComputedTextLength() returns 0 if element not rendered" and "SVG display:none rules"

To work around, i derived my own class based on Blockly.FieldMultilineInput, duplicated the updateSize_() implementation, and changed the dom.getTextWidth() call to dom.getFastTextWidth() like the "isBeingEdited_" section uses.

before:

after:

I don't know what the actual correct fix is though.

[ eta ]

using only getFastTextWidth can cause the text area edit widget to wrap too early. the fast width winds up just a bit smaller than when getTextWidth is valid ( in my case: 467.179... vs 467.395... )

changing the line from
const textWidth = dom.getTextWidth(tspan);
to:
const textWidth = dom.getTextWidth(tspan) || dom.getFastTextWidth(tspan, fontSize, fontWeight, fontFamily);

seems to keep the initial text looking good while also keeping the editor wrapping right.

[Juliandebruin]

Thank you @ionous this fixed my problem. In my case dom of dom.getFastTextWidth was undefined so the solution is to use Blockly.utils.dom.getFastTextWidth which is the alias given in the documentation.

[BeksOmega]

Fixed by #6461