scroll fixes for mobile

3 files changed, 17 insertions, 4 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 4fea2b57..4b3a0fd4 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -46,7 +46,10 @@ export default class MessageInput extends React.Component {
     }
 
     componentDidMount() {
-        this.textarea.current.focus();
+        const isMobile = window.matchMedia('only screen and (max-width: 850px)');
+        if (!isMobile.matches) {
+            this.textarea.current.focus();
+        }
     }
     textChanged = (event) => {
         this.setState({
@@ -77,8 +80,8 @@ export default class MessageInput extends React.Component {
             <form className="msg-comment-target">
                 <div style={commentStyle}>
                     <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
-                            ref={this.textarea} style={textInputStyle} value={this.state.body}
-                            rows={this.props.rows || '1'} placeholder={this.props.children} />
+                        ref={this.textarea} style={textInputStyle} value={this.state.body}
+                        rows={this.props.rows || '1'} placeholder={this.props.children} />
                     <div style={inputBarStyle}>
                         <div style={this.state.attach ? activeStyle : inactiveStyle}
                             onClick={this.openfile}>
@@ -87,7 +90,7 @@ export default class MessageInput extends React.Component {
                                 style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
                                 onChange={this.attachmentChanged} />
                         </div>
-                        <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button>
+                        <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
                     </div>
                 </div>
             </form>
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 7f8e515a..b426581d 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -31,6 +31,8 @@ export default class Thread extends React.Component {
     this.loadReplies();
   }
   loadReplies() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
     this.setState({ replies: [], loading: true });
     const { mid } = this.props.match.params;
     let params = {
diff --git a/vnext/src/components/__tests__/MessageInput-test.js b/vnext/src/components/__tests__/MessageInput-test.js
index 65ec383d..1cf89ebf 100644
--- a/vnext/src/components/__tests__/MessageInput-test.js
+++ b/vnext/src/components/__tests__/MessageInput-test.js
@@ -14,6 +14,14 @@ const testMessage = {
     timestamp: new Date().toISOString()
 };
 
+window.matchMedia = window.matchMedia || function() {
+    return {
+        matches : false,
+        addListener : function() {},
+        removeListener: function() {}
+    };
+};
+
 it('Gives immediate focus on to textarea on load', () => {
     const wrapper = mount(<MessageInput data={testMessage} onSend={() => { }} />);
     const textareaRef = wrapper.instance().textarea;