Accepted answer

I came across the same issue. With react-mention you don't have to use the react-text-autosize as you can achieve the same behavior with css which can auto grow the textarea generated. Consider following example

   placeholder="Add a comment"
          displayTransform={(id, display) => `@${display}`}

For this i've used the following styles

.mentionWrapper {
  width: 100%;
  background: transparent;
  font-size: 0.9rem;
  color: #a9b5c4;
 .mentionWrapper .mentionWrapper__control {
   border-radius: 25px;
   border: 1px solid #3a546f;
   min-height: 45px;

 .mentionWrapper .mentionWrapper__control .mentionWrapper__highlighter {
  padding: 0.7rem 1rem;

 .mentionWrapper .mentionWrapper__control .mentionWrapper__input {
  padding: 0.7rem 1rem;
  outline: 0;
  border: 0;
  resize: none;
  outline: none;
  font-size: 0.9rem;
  color: #7288a3;
  border-color: #3a546f;
  overflow: hidden;

.mentionWrapper .mentionWrapper__control .mentionWrapper__input::placeholder {
  color: #7288a3;

.mentionWrapper__suggestions {
  background-color: rgba(0, 0, 0, 0.6) !important;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 border-radius: 0.8rem;

.mentionWrapper__suggestions .mentionWrapper__suggestions__list {
  font-size: 14px;

.mentionWrapper__suggestions__item--focused {
 color: #ffffff;
 border-bottom: 1px solid #3a546f;
 font-weight: 600;

.mentionedFriend {
  color: #7288a3;
  text-decoration: underline;

Key point here is that i've applied a min-height of 45px to "control" div which is append by react-mention package. By doing so you will get the attached result. enter image description here

Related Query

More Query from same tag