remove default focus state on chat input field

bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx

@@ -47,16 +47,6 @@ class MessageForm extends PureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  componentDidMount() {
-    this.textarea.focus();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.chatName !== this.props.chatName) {
-      this.textarea.focus();
-    }
-  }
-
   handleMessageKeyDown(e) {
     // TODO Prevent send message pressing enter on mobile and/or virtual keyboard
     if (e.keyCode === 13 && !e.shiftKey) {
@@ -102,13 +92,16 @@ class MessageForm extends PureComponent {
   handleSubmit(e) {
     e.preventDefault();
 
-    const { disabled, minMessageLength, maxMessageLength } = this.props;
-    let message = this.state.message.trim();
+    const {
+      disabled, minMessageLength, maxMessageLength, handleSendMessage,
+    } = this.props;
+    const { message } = this.state;
+    let msg = message.trim();
 
     if (disabled
-      || message.length === 0
-      || message.length < minMessageLength
-      || message.length > maxMessageLength) {
+      || msg.length === 0
+      || msg.length < minMessageLength
+      || msg.length > maxMessageLength) {
       this.setState({ hasErrors: true });
       return false;
     }
@@ -116,10 +109,10 @@ class MessageForm extends PureComponent {
     // Sanitize. See: http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
 
     const div = document.createElement('div');
-    div.appendChild(document.createTextNode(message));
-    message = div.innerHTML;
+    div.appendChild(document.createTextNode(msg));
+    msg = div.innerHTML;
 
-    return this.props.handleSendMessage(message)
+    return handleSendMessage(msg)
       .then(() => this.setState({
         message: '',
         hasErrors: false,
@@ -128,24 +121,23 @@ class MessageForm extends PureComponent {
 
   render() {
     const {
-      intl, chatTitle, chatName, disabled,
+      intl, chatTitle, chatName, disabled, className, chatAreaId,
     } = this.props;
 
-    const { hasErrors, error } = this.state;
+    const { hasErrors, error, message } = this.state;
 
     return (
       <form
         ref={(ref) => { this.form = ref; }}
-        className={cx(this.props.className, styles.form)}
+        className={cx(className, styles.form)}
         onSubmit={this.handleSubmit}
       >
         <div className={styles.wrapper}>
           <TextareaAutosize
             className={styles.input}
             id="message-input"
-            innerRef={ref => (this.textarea = ref)}
             placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
-            aria-controls={this.props.chatAreaId}
+            aria-controls={chatAreaId}
             aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
             aria-invalid={hasErrors ? 'true' : 'false'}
             aria-describedby={hasErrors ? 'message-input-error' : null}
@@ -153,7 +145,7 @@ class MessageForm extends PureComponent {
             autoComplete="off"
             spellCheck="true"
             disabled={disabled}
-            value={this.state.message}
+            value={message}
             onChange={this.handleMessageChange}
             onKeyDown={this.handleMessageKeyDown}
           />