InputTextarea and emoji

[DazzlingBob]

It seems that unicode characters like emojis do not count correctly in a InputTextarea. For example one smile emoji costs two characters.
See https://www.primefaces.org/showcase/ui/input/inputTextarea.xhtml and click in the "Remaining Chars" InputTextarea.
Enter a emoji (like😊) and check the "x characters remaining" under the textarea.

For example:

Which should be 8 characters remaining.

Looked in the javascript code and found this:

    /**
     * Applies the value of the max length setting, counting line breaks correctly.
     * @private
     */
    applyMaxlength: function() {
        var _self = this;

        this.jq.on('keyup.inputtextarea-maxlength', function(e) {
            var value = _self.jq.val(),
            length = value.length;

            if(length > _self.cfg.maxlength) {
                _self.jq.val(value.slice(0, _self.cfg.maxlength));
            }
        });
    },

This exposes the following issues:

• length property of a string returns not the actual number of characters.
• slice() may cut in the middle of a character, leading to broken or unexpected output.

So it seems that these functions need to be replaced with multibyte aware functions.
Does anyone have experience in how to do this correctly in javascript?

[melloware]

@DazzlingBob wasn't this already fixed in 11.0.0: primefaces/primefaces#7253

Docs: https://primefaces.github.io/primefaces/15_0_0/#/components/inputtextarea?id=inputtextarea

countBytesAsChars | false | Boolean | Should bytes instead of characters be counted.

[DazzlingBob]

Tried countBytesAsChars="true" but that gives a javascript error:
jquery.js.xhtml?ln=primefaces&v=14.0.11:2 jQuery.Deferred exception: URI malformed URIError: URI malformed
at encodeURI ()

Setting countBytesAsChars="false" solves it. See project: primefaces-test-texarea.zip
Open project and see javascript console. Could be a bug?

Let me explain: in the database i have a field which can hold 10 utf-8 chars.
So i thought the solution is to set maxlength=10, but i can only enter 5 utf-8 characters in the textarea.
This is exact the same behavior as a normal html textarea (did not know this before).

So in the html spec maxlength is a number of bytes and not the number of displayed characters or glyphs.
This is a given. If a application requires a specific limit to be imposed it needs to implement
that limit itself based on its knowledge of what kind of limitation is wanted.

So the question is more like if someone has dealt with this kind of implementation before.
A javascript (jquery) check is needed (and remove maxlength) to count how many utf-8 characters are displayed and enforce a limit?
Maybe the logic in countBytesAsChars can be used for this, also jslib grapheme-splitter seems promising.

[melloware]

Definitely a bug can you open a GitHub issue ticket please! I think I have a fix...

[melloware]

Issue: primefaces/primefaces#13278