Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Question

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the code snippet:

package com.packagename.myapp;
import org.springframework.beans.factory.annotation.Autowired;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@Route(layout = DesktopLayout.class)
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
public class MainView extends VerticalLayout {
    public MainView(@Autowired MessageBean bean) {
        String loremIpsum = "Lorem ipsum dolor sit amet, [....].";
        
        TextArea readOnlyTA = new TextArea();
        readOnlyTA.setLabel("Read-only");
        readOnlyTA.setWidth("1500px");
        readOnlyTA.setMaxWidth("80vw");
        readOnlyTA.setValue(loremIpsum);
        readOnlyTA.setReadOnly(true);
        add(readOnlyTA);

        TextArea readWriteTA = new TextArea();
        readWriteTA.setLabel("normal");
        readWriteTA.setWidth("1500px");
        readWriteTA.setMaxWidth("80vw");
        readWriteTA.setValue(loremIpsum);
        add(readWriteTA);

        Div readOnlyDiv = new Div();
        readOnlyDiv.setWidth("1500px");
        readOnlyDiv.setMaxWidth("80vw");
        readOnlyDiv.add(loremIpsum);
        add(readOnlyDiv);
    }
}

Upon initially opening the view with a wide window, it appears as expected:

However, resizing the window results in only the beginning of the text being readable within the TextArea components, without scroll functionality.

Strangely, only the DIV resizes as anticipated.

Is there a way to ensure that Vaadin's TextArea adapts to window resizes?

javascript css vaadin vaadin-flow vaadin14

Answer 1

Answer №1

It appears that a bug has been identified and reported at this GitHub link

To address this issue, one workaround is to establish a window resize listener that executes textArea._updateHeight(); on the client side to prompt the height adjustment. Alternatively, utilizing a ResizeObserver could be an option, bearing in mind its browser support may have limitations as indicated here.

Here's a simple illustration to implement a resize listener workaround using Flow:

textArea.getElement().executeJs(
    "window.addEventListener('resize', function() { $0._updateHeight(); });",
    textArea.getElement());

It is advisable to envelop this resize handler within a basic debouncer to prevent frequent execution of _updateHeight() during resizing events and evade possible performance concerns.

Another approach would involve:

UI.getCurrent().getPage().addBrowserWindowResizeListener(event -> {
    textArea.getElement().executeJs("this._updateHeight();");
});

The presence of any built-in debouncing functionality in addBrowserWindowResizeListener is uncertain but it should ideally reduce server round trips triggered by the resizing activity.

Edit:

A more universal technique entails creating a new component that extends Vaadin's TextArea, leveraging ResizeObserver in compliant browsers alongside a fallback mechanism involving setInterval for other browsers.

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.textfield.TextArea;

public class CustomTextArea extends TextArea {
    private boolean initDone = false;

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        if (!initDone) {
            // debounce method borrowed from: https://davidwalsh.name/essential-javascript-functions
            getElement().executeJs(
                    "const debounce = function(func, wait, immediate) {" +
                    "  var timeout;" +
                    "  return function() {" +
                    "    var context = this, args = arguments;" +
                    "    var later = function() {" +
                    "      timeout = null;" +
                    "      if (!immediate) func.apply(context, args);" +
                    "    };" +
                    "    var callNow = immediate && !timeout;" +
                    "    clearTimeout(timeout);" +
                    "    timeout = setTimeout(later, wait);" +
                    "    if (callNow) func.apply(context, args);" +
                    "  };" +
                    "};" +
                    "const textArea = $0;" +
                    "const updateTextAreaHeight = function() { textArea._updateHeight(); };" +
                    "const debounceTimeout = 50;" +
                    "const intervalTimeout = 500;" +
                    "" +
                    "if (window.ResizeObserver) {" +
                    "  let textAreaDebouncer;" +
                    "  const resizeObserver = new ResizeObserver(debounce(updateTextAreaHeight, debounceTimeout));" +
                    "  resizeObserver.observe(textArea);" +
                    "} else {" +
                    "  let textAreaWidth = textArea.clientWidth;" +
                    "  window.setInterval(function() {" +
                    "    if (textAreaWidth !== textArea.clientWidth) {" +
                    "      updateTextAreaHeight();" +
                    "      textAreaWidth = textArea.clientWidth;" +
                    "    }" +
                    "  }, intervalTimeout);" +
                    "}", getElement());
            initDone = true;
        }
    }
}

Simply substitute CustomTextArea for TextArea to implement this solution successfully.

Answer 2

It appears that a bug has been identified and reported at this GitHub link

To address this issue, one workaround is to establish a window resize listener that executes textArea._updateHeight(); on the client side to prompt the height adjustment. Alternatively, utilizing a ResizeObserver could be an option, bearing in mind its browser support may have limitations as indicated here.

Here's a simple illustration to implement a resize listener workaround using Flow:

textArea.getElement().executeJs(
    "window.addEventListener('resize', function() { $0._updateHeight(); });",
    textArea.getElement());

It is advisable to envelop this resize handler within a basic debouncer to prevent frequent execution of _updateHeight() during resizing events and evade possible performance concerns.

Another approach would involve:

UI.getCurrent().getPage().addBrowserWindowResizeListener(event -> {
    textArea.getElement().executeJs("this._updateHeight();");
});

The presence of any built-in debouncing functionality in addBrowserWindowResizeListener is uncertain but it should ideally reduce server round trips triggered by the resizing activity.

Edit:

A more universal technique entails creating a new component that extends Vaadin's TextArea, leveraging ResizeObserver in compliant browsers alongside a fallback mechanism involving setInterval for other browsers.

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.textfield.TextArea;

public class CustomTextArea extends TextArea {
    private boolean initDone = false;

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        if (!initDone) {
            // debounce method borrowed from: https://davidwalsh.name/essential-javascript-functions
            getElement().executeJs(
                    "const debounce = function(func, wait, immediate) {" +
                    "  var timeout;" +
                    "  return function() {" +
                    "    var context = this, args = arguments;" +
                    "    var later = function() {" +
                    "      timeout = null;" +
                    "      if (!immediate) func.apply(context, args);" +
                    "    };" +
                    "    var callNow = immediate && !timeout;" +
                    "    clearTimeout(timeout);" +
                    "    timeout = setTimeout(later, wait);" +
                    "    if (callNow) func.apply(context, args);" +
                    "  };" +
                    "};" +
                    "const textArea = $0;" +
                    "const updateTextAreaHeight = function() { textArea._updateHeight(); };" +
                    "const debounceTimeout = 50;" +
                    "const intervalTimeout = 500;" +
                    "" +
                    "if (window.ResizeObserver) {" +
                    "  let textAreaDebouncer;" +
                    "  const resizeObserver = new ResizeObserver(debounce(updateTextAreaHeight, debounceTimeout));" +
                    "  resizeObserver.observe(textArea);" +
                    "} else {" +
                    "  let textAreaWidth = textArea.clientWidth;" +
                    "  window.setInterval(function() {" +
                    "    if (textAreaWidth !== textArea.clientWidth) {" +
                    "      updateTextAreaHeight();" +
                    "      textAreaWidth = textArea.clientWidth;" +
                    "    }" +
                    "  }, intervalTimeout);" +
                    "}", getElement());
            initDone = true;
        }
    }
}

Simply substitute CustomTextArea for TextArea to implement this solution successfully.

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Answer №1

Similar questions

Troubleshooting issue with Gulp watch on Node v4.6.0

What is the best way to convert a 2D PHP array into a JavaScript array?

Using the highcharts-ng library in combination with ng-repeat was successful in creating multiple charts. However, in order to display different data for each chart, the

Convert a div into a clickable link using JavaScript without using too many classes or any ids

JavaScript live search dynamically loads MySQL data into memory

Issues with Navigating through a Scrollable Menu

What is the process for accessing the theme spacing unit in MUI 5?

Learn how to instruct ajax to fetch the designated information and retrieve corresponding data from the database based on the selected criteria

Ways to retrieve a service variable within a delegated function (callback)

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

Generate dynamic lines with evolving hues using CSS3

Prepare an email message for sending

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Creating a fetcher that seamlessly functions on both the server and client within Nextjs 13 - the ultimate guide!

Firebase onSnapshot error when retrieving data from Snapchot

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

Displaying an iFrame with a height that excludes the header section

Excess padding in Internet Explorer 7 when a table is nested within a div tag

Every single checked value in the checkbox variable

Refine the pandas Dataframe with a filter on a JavaScript-enabled website