search

signavio / react-mentions

@mention people in a textarea
https://react-mentions.vercel.app
Other
2.47k stars 573 forks source link

Rows #292

Open lorinkoz opened 5 years ago

lorinkoz commented 5 years ago

Is there any way to specify height in number of rows?

frontendphil commented 5 years ago

The renderSuggestion prop you pass to a Mention component can define any style you want. So you'd just render something with exactly the height you want.

lorinkoz commented 5 years ago

I mean, I want to do something like <MentionsInput rows={2}>...</MentionsInput>

frontendphil commented 5 years ago

I don't get it. What should that prop then influence?

lorinkoz commented 5 years ago

https://www.w3schools.com/tags/att_textarea_rows.asp

EDIT: More like the minimum rows always visible, and NOT a fixed number of rows. I know it autogrows upon editing.

lorinkoz commented 5 years ago

To clarify, what I'm asking for is a minRows and not a strict rows prop, to mimic the behavior of the original textarea. The input would start with minRows in height, and would continue to grow as text is entered.

jjdonov commented 5 years ago

👍Would love to see this added

I tried to implement something similar, but my approach may have been wrong. Thought react-mentions passes the rows prop down to the textarea, It seems to not be respected because of position: absolute. In my brief testing, when I disabled that style the textarea had the correct rows.

I didn't go further down that path, because I believe the positioning is important to getting the overlays and suggestions to render in the right place. But, I was able to get a hack working by using fontsize and lineheight to set a height in px.