remove autoFocus from message input field on mobile, #111

css/base.css

@@ -3064,4 +3064,9 @@ ul.tabbar li.active > a {
   li .menuTrigger {
     opacity: 0.3;
   }
+
+  #send-message-input {
+    /* Just an indicator that the screen is in mobile mode */
+    transition-property: -tinode-mobile;
+  }
 }

src/widgets/send-message.jsx

@@ -90,6 +90,10 @@ class SendMessage extends React.PureComponent {
   componentDidMount() {
     if (this.messageEditArea) {
       this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
+        this.messageEditArea.focus();
+      }
     }
 
     this.setState({quote: this.formatReply()});
@@ -103,7 +107,10 @@ class SendMessage extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (this.messageEditArea) {
-      this.messageEditArea.focus();
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
+        this.messageEditArea.focus();
+      }
     }
 
     if (prevProps.topicName != this.props.topicName) {
@@ -266,11 +273,10 @@ class SendMessage extends React.PureComponent {
                       onDeleted={_ => this.setState({audioRec: false})}
                       onFinished={this.handleAttachAudio}/>
                   </Suspense>) :
-                  <textarea id="sendMessage" placeholder={prompt}
+                  <textarea id="send-message-input" placeholder={prompt}
                     value={this.state.message} onChange={this.handleMessageTyping}
                     onKeyPress={this.handleKeyPress}
-                    ref={(ref) => {this.messageEditArea = ref;}}
-                    autoFocus />)}
+                    ref={ref => {this.messageEditArea = ref;}} />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title={formatMessage(messages.icon_title_send)}>
                   <i className="material-icons">{sendIcon}</i>

umd/index.dev.js

@@ -15306,6 +15306,9 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
   componentDidMount() {
     if (this.messageEditArea) {
       this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        this.messageEditArea.focus();
+      }
     }
     this.setState({
       quote: this.formatReply()
@@ -15318,7 +15321,9 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
   }
   componentDidUpdate(prevProps) {
     if (this.messageEditArea) {
-      this.messageEditArea.focus();
+      if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
+        this.messageEditArea.focus();
+      }
     }
     if (prevProps.topicName != this.props.topicName) {
       this.setState({
@@ -15479,15 +15484,14 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       }),
       onFinished: this.handleAttachAudio
     })) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
-      id: "sendMessage",
+      id: "send-message-input",
       placeholder: prompt,
       value: this.state.message,
       onChange: this.handleMessageTyping,
       onKeyPress: this.handleKeyPress,
       ref: ref => {
         this.messageEditArea = ref;
-      },
-      autoFocus: true
+      }
     }), this.state.message || !audioEnabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
       onClick: this.handleSend,