diff options
author | 2018-08-24 17:27:09 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 00d5a8dc3983b1b5911c7279394ebdac564a798e (patch) | |
tree | 501edf4dda5cf1ddbaa8023d2487e5d52928d14d /vnext/src | |
parent | aa52bb339a6016e8ed7833b9abaa4e0abb7f2351 (diff) |
scroll fixes for mobile
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/MessageInput.js | 11 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 2 | ||||
-rw-r--r-- | vnext/src/components/__tests__/MessageInput-test.js | 8 |
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; |