I am having an issue with my HTML textarea that expands on focus. Below the textarea, I have a button for users to submit their input. However, when the textarea is expanded and the button is clicked, it does not fire the onclick event. Instead, it causes the textarea to lose focus and shrink back down. How can I ensure that the onclick event fires on the first click?
<div id="commentSection">
<div id="commentsContainer">
</div>
<div id="inputContainer">
<textarea placeholder="add a comment" id="txtTitle"></textarea>
</div>
<div>
<button onclick="return addListItem()">Post</button>
</div>
The button does not have any styles attached, but the textarea has the following:
#txtTitle {
width: 878px;
margin-bottom: 5px;
height: 30px;
transition: height 0.2s;
}
#txtTitle:focus {
height: 100px;
}