`FieldMultilineInput` is rendered badly, hiding first line

[cpcallen]

Check for duplicates

• [X] I have searched for similar issues before opening a new one.

Description

When typing into a FieldMultilineInput / text_multiline block, I would expect that the field (and block) would be resized to show the text being entered. Instead, it seems to be resized in such a way that it is just a little too small to shown all of the typed text, resulting in most of the first line being hidden.

Reproduction steps

1. On the playground, drag a text_multiline (¶) block onto the workspace.
2. Type some text, e.g.:
3. Observe that in each case most of the first line is not visible, with only the last letter/word shown, and the rest mostly hidden above the top edge of the field, with only descenders visible:
   1. If typing a single word, only the last character typed is shown.
   2. If typing multiple words, only the last word is shown.
   3. If typing multiple lines, only the second and subsequent lines are fully visible, and the longest line will be broken such that the final character is wrapped to the next line.

Stack trace

No errors in console.

Screenshots

1. "qwerty":
   
2. "The quick brown fox jumps over the lazy dog.":
   
3. "qwerty⏎dvorak⏎colemac":
   

Browsers

Chrome version 114.0.5735.133 on macOS Ventura 13.4

[BeksOmega]

Also broken on master (based on testing against app engine which hasn't been updated for the v10 beta).

[stefan-hoehn]

First of @cpcallen thanks for the nice talk at Fosdem 2024 and the chat we had together after the session.

At openHAB we use Blockly a lot and one issue that has been bugging me is the wrong rendering on the multiline field. Here is an example of the initial state of a block when it is first created:

As soon as I only click into it it appears as

Then I edit it by putting

first line second line third line

and it appears as

Note that we are still using Blockly 9.2.0, so 10 might behave differently

Here is the code how I create the block:

      this.appendDummyInput()
          appendField('inline script (advanced)')
      let code = 'for (var i = 0; i < 10; i++) {\n  console.log(i.toString());\n}'
      this.appendDummyInput()
        .appendField(new Blockly.FieldMultilineInput(code), 'inlineScript')
      this.setInputsInline(false)
      this.setPreviousStatement(true, null)
      this.setNextStatement(true, null)
      this.setColour(0)
      this.setHelpUrl('https://www.openhab.org/docs/configuration/blockly/rules-blockly-run-and-process.html#inline-script')
      this.setTooltip('Allows inlining arbitrary script code which has to be syntactically correct')

[btw17]

First of @cpcallen thanks for the nice talk at Fosdem 2024 and the chat we had together after the session.

At openHAB we use Blockly a lot and one issue that has been bugging me is the wrong rendering on the multiline field. Here is an example of the initial state of a block when it is first created:

As soon as I only click into it it appears as Then I edit it by putting

first line second line third line

and it appears as

Note that we are still using Blockly 9.2.0, so 10 might behave differently

Here is the code how I create the block:

      this.appendDummyInput()
          appendField('inline script (advanced)')
      let code = 'for (var i = 0; i < 10; i++) {\n  console.log(i.toString());\n}'
      this.appendDummyInput()
        .appendField(new Blockly.FieldMultilineInput(code), 'inlineScript')
      this.setInputsInline(false)
      this.setPreviousStatement(true, null)
      this.setNextStatement(true, null)
      this.setColour(0)
      this.setHelpUrl('https://www.openhab.org/docs/configuration/blockly/rules-blockly-run-and-process.html#inline-script')
      this.setTooltip('Allows inlining arbitrary script code which has to be syntactically correct')

In the blockly-samples version of this issue, I tested the case Stefan has here in my fix, and the formatting has no issues! https://github.com/google/blockly-samples/pull/2208

[stefan-hoehn]

So does that mean, we should be good if we used the latest blockly version that includes #2208

[stefan-hoehn]

Or let me ask you what version we should move to have the fix included. We are currently moving to 10.4.2

[btw17]

So does that mean, we should be good if we used the latest blockly version that includes #2208

So FieldMultilineInput is being moved from blockly to blockly-samples. Once this fix is merged and the version is bumped, you can install the plugin individually via @blockly/field-multilineinput instead of through the root blockly package. The fix isn't currently published yet, though.

[stefan-hoehn]

Since https://github.com/google/blockly-samples/pull/2208 has been merged, I did the following as described at https://github.com/google/blockly-samples/tree/master/plugins/field-multilineinput

npm install @blockly/field-multilineinput --save

which installs the version in package.json

"dependencies": { "@blockly/field-multilineinput": "^3.0.12",

I then went to my code and added the import the script

import {FieldMultilineInput} from '@blockly/field-multilineinput';

and I changed the former

this.appendDummyInput() .appendField(new Blockly.FieldMultilineInput(code), 'inlineScript') to this.appendDummyInput() .appendField(new FieldMultilineInput(code), 'inlineScript')

This is what the block looks like

but when I click into the block I get a wrong rendering as before

How can I see if the version has already been bumped as you say? What exactly do you mean by that?

[BeksOmega]

Hello @stefan-hoehn the code has been merged, but not released yet. It will be released on Thursday, Februrary 29, 2024.

[stefan-hoehn]

@BeksOmega I tried again today and I can confirm that it fixed the issue but only somehow.

The above bogus text worked but when I copied something like the following (I just copied some longer lines that wrap around)

it renders like

but when I edit it, it becomes:

So it seems to be related to the wrap around to the long lines? As soon as the text becomes longer than the foreseen width I run into this issue.

Adding a scrollbar "allows me" to put the doubled rendered/overlayed content almost anywhere:

Should i rather mention this in https://github.com/google/blockly-samples/pull/2208?

[maribethb]

Hey, thanks for getting back to us with more details! We'll take a look at the follow-up fix necessary for this. Thanks!

[btw17]

I was able to recreate this by setting background: none or transparent on the textarea.

What it looks like is happening is you've set the hidden the textarea's background, so you're seeing the input text on top of the block's text. To fix this, you just need to have a non-transparent background. (This is how the textarea behaves by default.)

Behind the scenes, the input text and block text may not be in sync since the block doesn't wrap its text but the input does.

[stefan-hoehn]

Yes, indeed, your observation is true - good catch! We are using the f7 framework which by default sets the background of a textarea to none.

As this seems to be important not be set to none or transparent, would it then make sense that either .blocklyHtmlInput or. blocklyHtmlTextAreaInput contains a style that makes sure that the background is set correctly?

or would you expect me to set it correctly for my particular application? (I will definitely do for the time being) UPDATE: I did the style fix in openHAB and it works well. 🙏🏻

In the later case I would at least recommend that we document that somewhere, shouldn't we?

Btw, is there a way to set the width of the FieldMultilineInput?

[maribethb]

Hi @stefan-hoehn we expect that this is something you should fix on your application's side. Adding new css to blockly's existing classes is tricky because we wouldn't want to override someone's (intentional) custom css.

If you have follow up questions about how to use a particular field we recommend you post on the forum as those types of questions are likely to get lost when asked on github issues. Thanks!