0

I have a textarea in which I have a button as well in the bottom right corner.

enter image description here

Everything looks great unless I add more words and it overlaps the button.

enter image description here

What I want to do is as soon as someone reaches the last line, the size of the textarea increases automatically. I have found one solution in codepen - https://codepen.io/anon/pen/gLdRXE But I am not sure how to implement the same using React. Also, I am using textarea and not input tag.

textarea{
  width:100%;
  min-height:80px;
  max-height:200px;
  overflow:auto;
  resize:vertical;
}

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}

Many thanks

Mohit Chauhan
  • 95
  • 11
  • 1
    Does this answer your question? [Textarea to resize based on content length](https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length) – Youssouf Oumar Dec 26 '22 at 16:55
  • @yousoumar This is the implementation I am looking for. But how can I achieve it in React? – Mohit Chauhan Dec 26 '22 at 20:27

0 Answers0