re-enable scrolling, focus, and blur

frontend/src/Metamaps/Views/ChatView.js

@@ -120,16 +120,10 @@ const ChatView = {
     ChatView.render()
   },
   close: () => {
-    // TODO how to do focus with react
-    // this.$messageInput.blur()
     ChatView.mapChat.close()
   },
   open: () => {
     ChatView.mapChat.open()
-    // TODO how to do focus with react
-    // this.$messageInput.focus()
-    // TODO reimplement scrollMessages
-    // this.scrollMessages(0)
   },
   videoToggleClick: function() {
     ChatView.videosShowing = !ChatView.videosShowing
@@ -153,10 +147,8 @@ const ChatView = {
     if (!isInitial) self.mapChat.newMessage() 
     if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
     self.messages.add(message)
-    // TODO what is scrollMessages?
-    // scrollMessages scrolls to the bottom of the div when there's new messages“
-    // if (!isInitial) self.scrollMessages(200)
     self.render()
+    if (!isInitial) self.mapChat.scroll()
   },
   sendChatMessage: message => {
     var self = ChatView

frontend/src/components/MapChat/index.js

@@ -31,17 +31,24 @@ class MapChat extends Component {
   close = () => {
     this.setState({open: false})
     this.props.onClose()
+    this.messageInput.blur()
   }
 
   open = () => {
+    this.scroll()
     this.setState({open: true, unreadMessages: 0})
     this.props.onOpen()
+    this.messageInput.focus()
   }
 
   newMessage = () => {
     if (!this.state.open) this.setState({unreadMessages: this.state.unreadMessages + 1})
   }
 
+  scroll = () => {
+    this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight
+  }
+
   toggleDrawer = () => {
     if (this.state.open) this.close()
     else if (!this.state.open) this.open()
@@ -117,10 +124,11 @@ class MapChat extends Component {
           <div className="tooltips">Chat</div>
           <Unread count={unreadMessages} />
         </div>
-        <div className="chat-messages">
+        <div className="chat-messages" ref={div => this.messagesDiv = div}>
           {messages.map(message => <Message key={message.id} {...message} />)}
         </div>
         <textarea className="chat-input"
+          ref={textarea => this.messageInput = textarea}
           placeholder="Send a message..."
           value={this.state.messageText}
           onChange={this.handleChange('messageText')}