bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: focus input under some circumstances

Browse source
This commit is contained in:
Alex Gleason 2020-08-25 22:03:53 -05:00
parent dcaadb2153
commit 205078c865
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/soapbox/features/chats/components/chat_window.js
View file

@ -64,17 +64,31 @@ class ChatWindow extends ImmutablePureComponent {
this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
}
setRef = (el) => this.messagesEnd = el;
focusInput = () => {
if (!this.inputElem) return;
this.inputElem.focus();
}
setMessageEndRef = (el) => this.messagesEnd = el;
setInputRef = (el) => this.inputElem = el;
componentDidMount() {
const { dispatch, pane, chatMessages } = this.props;
this.scrollToBottom();
if (chatMessages && chatMessages.count() < 1)
dispatch(fetchChatMessages(pane.get('chat_id')));
if (pane.get('state') === 'open')
this.focusInput();
}
componentDidUpdate() {
componentDidUpdate(prevProps) {
this.scrollToBottom();
const oldState = prevProps.pane.get('state');
const newState = this.props.pane.get('state');
if (oldState !== newState && newState === 'open')
this.focusInput();
}
render() {
@ -105,7 +119,7 @@ class ChatWindow extends ImmutablePureComponent {
</span>
</div>
))}
<div style={{ float: 'left', clear: 'both' }} ref={this.setRef} />
<div style={{ float: 'left', clear: 'both' }} ref={this.setMessageEndRef} />
</div>
<div className='pane__actions'>
<input
@ -114,6 +128,7 @@ class ChatWindow extends ImmutablePureComponent {
onKeyDown={this.handleKeyDown(chat.get('id'))}
onChange={this.handleContentChange}
value={this.state.content}
ref={this.setInputRef}
/>
</div>
</div>