aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-08-24 17:27:09 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commit00d5a8dc3983b1b5911c7279394ebdac564a798e (patch)
tree501edf4dda5cf1ddbaa8023d2487e5d52928d14d /vnext/src/components
parentaa52bb339a6016e8ed7833b9abaa4e0abb7f2351 (diff)
scroll fixes for mobile
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/MessageInput.js11
-rw-r--r--vnext/src/components/Thread.js2
-rw-r--r--vnext/src/components/__tests__/MessageInput-test.js8
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;