Large scroll height in textarea causes large blank space and displaced suggestions menu beneath textarea

[m-mitchell]

Steps to reproduce:

1. Create a MentionsInput component with Mentions and suggestions
2. Enter or paste a large amount of text in the textarea so that it has many lines

Expected behaviour:

Textarea should scroll and the mentions menu should appear near where the user is entering a mention. There should be no blank space below the textarea unless added by another component.

Observed behaviour:

One of the sibling divs to the textarea becomes extremely long (possibly matching the full height of the textarea before applying scroll?) The mentions menu appears at the bottom of the sibling div.

https://user-images.githubusercontent.com/169674/160489210-bac69c7b-4ba0-4e66-9375-cd19b9eb85f7.mov

Workaround:

Setting the sibling div to display:none seems to fix the issue but I'm not sure what this div is for, so this might not be a good idea.

[m-mitchell]

The div causing the problem is the highlighter div. Since we aren't using highlighting for our use case, I just set display: none as a workaround. Someone who runs into this bug and wants to use highlighting would have to find a different solution.