FieldMultilineInput can overflow the page

[dionytadema]

Describe the bug

When a FieldMultilineInput has too many paragraphs of text, the block grows very large, and when editing it's value the input box may overflow the page.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
2. Click on 'Workspace Factory'
3. Import Custom Blocks > From Javascript
4. Create and select the file with these contents:

Blockly.Blocks['multiline'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("print")
        .appendField(new Blockly.FieldMultilineInput("default"), "NAME");
    this.setColour(230);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

5. Add the multiline block
6. Add lines ultil text overflows the workspace/page

Expected behavior

I expected this to be handled in a cleaner way, perhaps a limit of lines in the input and a scrollbar if that limit is exeded.

Right now this issue can break the layout of pages that integrate blockly and use the multiline.

Screenshots

Block getting large when multiple lines are added:

Input overflowing the workspacce and breaking the page:

Desktop:

• OS: Windows
• Browser: Chrome
• Version 88

Stack Traces

Not aplicable

Additional context

[BeksOmega]

Hmmm normal text fields can also cause overflows (and I assume they can break the page layout). What's your expected behavior in a situation like below?

The two ideas I can come up with (adding a horizontal scroll bar, or forcing the block within the view bounds) both seem inelegant :/

[dionytadema]

Normal fields can indeed also overflow, but at least they are bounded to a max width as you can see. This makes it less likely that a user makes the text overflow outside of the workspace.

Actually very weird that they can extend beyond the wraping div my page uses, as that has overflow: hidden so should not be able to overflow

To me the best solution would be taking the folowing steps:

• Limit the height of the block to ~8 lines
• Make sure that the input box also shows multiple lines if a single line wraps (currently the line wraps but input box doesn't get larger, making it kinda hard to see all your text
• If possible add a scrollbar, and scrolling behavior to the input box (scrollwheel does nothing right now)
• Maybe add an elipsis ( ⋮ <or a vertical one) on the last line if more then 8 lines are present in the block

So it would look like this when inactive

And like this when active

It would not 'fix' the overflow issue but it would make users a lot less likely to run into it. As they will naturally try to fit the block they are working on within the view

Another inelegant solution would be reusing the popup that appears for dropdowns, as that one already positions itself within the view. but it don't think that would be intuitive

[gonfunko]

This issue was also reported on the forum: https://groups.google.com/g/blockly/c/g2xM0gnAbiE

[MrAndrewMal]

Hmmm normal text fields can also cause overflows (and I assume they can break the page layout). What's your expected behavior in a situation like below?

The two ideas I can come up with (adding a horizontal scroll bar, or forcing the block within the view bounds) both seem inelegant :/

In this case, I think the canvas (view area) should move with the cursor.
I want to implement such a feature in my fork. How can I detect overflow in FieldTextInput?