Vaadin 14: изменить размер TextArea после изменения размера окна

Кажется, это ошибка. Я только что сообщил об этом здесь https://github.com/vaadin/vaadin-text-field/issues/460

В качестве обходного пути вы можете установить прослушиватель окна resize, который запускает textArea._updateHeight(); на стороне клиента, чтобы инициировать обновление высоты. Или вы можете использовать ResizeObserver, но он все еще несколько ограничен поддержка браузера

Вот наивный пример добавления обходного пути прослушивателя изменения размера в Flow:

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

Но вы должны обернуть этот обработчик изменения размера в какой-нибудь базовый дебаунсер, чтобы он не запускался _updateHeight() слишком часто во время изменения размера, чтобы избежать проблем с производительностью.

В качестве альтернативы вы можете сделать это:

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

Я не уверен, есть ли у addBrowserWindowResizeListener какая-то встроенная защита от дребезга или нет, но я думаю, что это, по крайней мере, вызовет обращения сервера туда и обратно при изменении размера, чего, вероятно, следует избегать, если это возможно.

Изменить:

Вот более универсальный подход, создающий новый компонент, который расширяет Vaadin TextArea и использует ResizeObserver в поддерживаемых браузерах (с setInterval в качестве запасного варианта для других браузеров).

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;
        }
    }
}

Тогда просто используйте этот CustomTextArea вместо TextArea и он должен работать.