Can someone please help me troubleshoot an issue with my chat app? Every time I try to send a message, the textarea adds a line break instead of just focusing on the textarea so I can send a new message smoothly.
I have recorded a video demonstrating the problem:
Prior to sending the first message "hello", the placeholder text reads: 'Your message . . .'. After sending the message, the placeholder disappears but then reappears later as if there is a line break or ghost character interrupting the flow. This forces me to manually press delete to clear it.
Below is the HTML and CSS code for the affected element:
HTML
<div className="chat-form">
<textarea className="input-form"
placeholder="Your message..."
ref="newMessage"
onClick={this._onKeyDown}
autofocus="true" ></textarea>
</div>
CSS
.chat-form {
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #ecf0f1;
opacity: .4;
}
.input-form {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: 1px solid rgba(192,192,192,0.3);
color: #fff;
font-size: 0.7em;
margin-bottom: 0;
outline: 0;
padding: 2% 1% 6% 1%;
position: relative;
width: 85%;
}
textarea {
resize: none;
}
}
JavaScript
_addMessage () {
let input = this.refs.newMessage.getDOMNode();
this.props.onAddMessage(input.value);
input.value = '';
input.focus();
}