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:

https://i.sstatic.net/c7XB8.png

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

https://i.sstatic.net/hdr6S.png

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

Illumination scope for directional lights in three.js

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

When creating routes in Express 4.* using node.js, it is essential to use the root directory

Adjust the size of an IFRAME to eliminate scrollbars from appearing

Preventing the Spread of JavaScript Promises

Generate fresh JavaScript objects with customized properties

Managing Emails with Vue and Firestore

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

When json.parse encounters an undefined value at position 1

Error with Cross-Origin Resource Sharing (CORS) on my website

Basic JavaScript string calculator

What is the best way to eliminate query parameters in NextJS?

Ways to dynamically emphasize text within ngFor loop

Creating code that is easily testable for a unique test scenario

Incorporating an express server into the vue-webpack-boilerplate for enhanced functionality

Using d3 to showcase pictures sourced from a csv file

Creating a Stylish Funnel Graph using CSS

How to resolve undefined callback when passing it to a custom hook in React Native

Employ an asynchronous immediately-invoked function expression within the callback

What's the CSS equivalent of Java's window.pack() method?