Tags don't appear as tags after second row in textarea

[conner-fallone]

In the example page, put some random text in the text area to occupy at least 2 rows. If you put a tag in any row >= 3, the highlighting on the tag won't occur

[sbakic]

If you see carefully in example.html, height of the textarea or bottom line is the place where background-color of mentions disappear. So if you set height in order to have more rows, you will be able to see highlighted mentions, till a row which is located below initial height.

There is a workaround for this bug with resize: none; and setting initial height.

[lmfmaier]

I worked around this bug.

Set resize:none as mentioned above.

Use an autosize plugin (e.g. https://github.com/jackmoore/autosize/blob/master/src/autosize.js), which resizes the textarea automatically when the text doesn't fit anymore

Listen to the keyup event of the textarea and set the highlighter container's height to the textareas height:
$('textarea').on('keyup paste',function() { $(this).parent().find('.highlighter').css('height',$(this).css('height')); });