enketo-core/src/widget/textarea/textarea.js

Extensible Enketo form engine

import Widget from '../../js/widget';
import events from '../../js/event';
import { MutationsTracker } from '../../js/dom-utils';

/**
 * Auto-resizes textarea elements.
 *
 * @augments Widget
 */
class TextareaWidget extends Widget {
    /**
     * @type {string}
     */
    static get selector() {
        return 'form';
    }

    _init() {
        const textareas = this.element.querySelectorAll('textarea');
        this.defaultHeight = textareas[0] ? textareas[0].clientHeight : 20;
        this.element.addEventListener('input', (event) => {
            const el = event.target;
            if (el.nodeName.toLowerCase() === 'textarea') {
                this._resize(el);
            }
        });
        // workaround for resize issue on first time load textarea with existing value on enketo-express
        new MutationsTracker(this.element).waitForQuietness().then(() => {
            textareas.forEach(this._resize.bind(this));
        });
        this.element.addEventListener(events.PageFlip().type, (event) => {
            const els = event.target.querySelectorAll('textarea');
            els.forEach(this._resize.bind(this));
        });
    }

    _resize(el) {
        if (
            el.scrollHeight > el.clientHeight &&
            el.scrollHeight > this.defaultHeight
        ) {
            // using height instead of min-height to allow user to resize smaller manually
            el.style.height = `${el.scrollHeight}px`;
            // for the Grid theme:
            el.style.flex = 'auto';
        }
    }
}

export default TextareaWidget;