Search code examples
javascripttextareasapui5autogrow

Auto growing text area has invalid height after rendering in sapui5

I has xml view with auto growing sap.m.TextArea

<TextArea value="{/abstract}" growing="true" growingMaxLines="100" maxLength="5000" rows="5">
    ...
</TextArea>

If I enter big enough text that takes more than 5 rows save it and reload page text area will be rendered with extremely big height. If we try to type something text area will adjust its height to the text.

After small research I found that text area methods onAfterRendering and oninput use method _adjustHeight that takes dom element and uses its property scrollHeight to calculate height. But when it is called in onAfterRendering there is wrong scrollHeight.

I tried to trigger input event but input handler in text area skips events that were triggered by jQuery().trigger().

Maybe someone has ideas how to avoid this or has already faced with this problem?

Solution

  • I was just experiencing the same issue (1.44.8) when navigating to a view with a TextArea and new binding. So as a complete hack fix for now, this seems to work during the navigation to the view (basically puts an invalidate after rendering is complete):

    // Bug fix - invalidate TextAreas
window.setTimeout(function () {
    this.getView().byId("myTextAreaField").invalidate();
}.bind(this), 0);