Primefaces: AutoResize der inputTextarea mit dynamischer Breite fehlerhaft (Patch/Workaround)

Die Primefaces Komponente InputTextArea bietet die Möglichkeit, über das Attribut „autoResize“ die Größe mittels JavaScript dynamisch anpassen zu lassen.

<p:inputTextarea autoResize="true" style="width:70%;" />

Problem
Die Berechnung der notwendigen Größe funktioniert leider mit der aktuellen Version 5.1 nur dann korrekt, wenn eine feste Breite für das p:inputTextarea Tag angegeben wird. Wird die Breite in Prozent angegeben, ist die Berechnung der Höhe bzw. die Anzahl der notwendigen Rows fehlerhaft. Dies tritt aber erst ab einem Wert von 51% und mehr wirklich sichtbar auf. Die Anzahl der Rows die nach unten hin zuviel vorhanden sind, ist abhängig von der Länge des Textes und der Breite.

Bereits im Mai 2012 wurden die Entwickler von Primefaces auf dieses Problem (Issue 4015) aufmerksam gemacht. Leider steht das Issue auf den Status „WontFix“, was ich leider nicht ganz nachvollziehen kann.

Lösungsansatz
Es wurde bereits ein inoffizieller Patch im Issue zur Verfügung gestellt. Leider ist dieser nicht mehr ganz mit der aktuellen Primefaces Version 5.1 kompatibel. Zusätzlich wurde vergessen die Mindesthöhe der Textarea zu beachten. Hat eine Textarea noch keinen Inhalt oder braucht der Inhalt weniger Platz als die Mindesthöhe, dann wird trotzdem ein niedrigerer Wert als die Mindstehöhe gesetzt.

Patch für Primefaces 5.1
Ich habe den vorhandenen Patch erweitert und für die aktuelle Primefaces Version 5.1 angepasst.

InputTextarea Resize Patch herunterladen

Anpassung ohne Änderung der Bibliothek
Oft ist es jedoch keine gute Idee, den orginalen Sourcecode einer Bibliothek zu verändern. Die Änderung müsste dann z. B. bei jedem Update der Bibliotek immer wieder angepasst werden.

Etwas eleganter finde ich nachfolgende Lösung. Dort wird die Anpassung im eigenen Code vorgenommen und verändert nicht die Bibliothek selbst.

1. Folgende CSS Klasse muss hinzugefügt werden

.ui-inputtextarea-resizable-reference{
    position: absolute;
    bottom: 0;
    right: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    visibility: hidden;
}

2. Überschreiben der JavaScript Funktionen „setupAutoResize“ und „resize“ Komponente.

PrimeFaces.widget.InputTextarea.prototype.setupAutoResize_base = PrimeFaces.widget.InputTextarea.prototype.setupAutoResize;
PrimeFaces.widget.InputTextarea.prototype.resize_base = PrimeFaces.widget.InputTextarea.prototype.resize;

PrimeFaces.widget.InputTextarea.prototype.setupAutoResize = function(){
    var suffix, referenceContainerId;

    suffix = '_reference';
    referenceContainerId = this.jqId + suffix;
    this.referenceContainer = $(referenceContainerId);

    if (this.referenceContainer.length != 1) {
        this.referenceContainer = $(document.createElement('div'))
            .attr('id', this.id + suffix)
            .addClass('ui-widget ui-inputfield ui-inputtextarea ui-inputtextarea-resizable-reference')
            .appendTo($(document.body));
    }

    this.setupAutoResize_base();
    //this.resize();  //use this line to resize textarea on initialization
};


PrimeFaces.widget.InputTextarea.prototype.resize = function(){
    var newH, minH;

    //Update reference container and resize text area
    this.referenceContainer.width(this.jq.width());
    this.referenceContainer.text(this.jq.val());

    newH = this.referenceContainer.innerHeight();
    minH = parseInt(this.jq.css('min-height'), 10); //parse to int to remove all non numeric chars

    if(isNaN(minH) || minH === 0){
        this.jq.css('min-height',this.jq.height());
    }

    this.jq.height(newH);
};