From 8ddd2dd078ef5b6dd3bcc3173f0fc22798e962f2 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 13 Nov 2018 09:15:16 +0100
Subject: [PATCH] scroll down when showing typing notif and stuck at bottom

---
 src/components/structures/MessagePanel.js     |  9 ++++++++-
 src/components/views/rooms/WhoIsTypingTile.js | 11 ++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 7e3a5941ef..1107be8464 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -631,6 +631,13 @@ module.exports = React.createClass({
         }
     },
 
+    _scrollDownIfAtBottom: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            scrollPanel.checkScroll();
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
@@ -667,7 +674,7 @@ module.exports = React.createClass({
                     stickyBottom={this.props.stickyBottom}>
                 { topSpinner }
                 { this._getEventTiles() }
-                <WhoIsTypingTile room={this.props.room} />
+                <WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />
                 { bottomSpinner }
             </ScrollPanel>
         );
diff --git a/src/components/views/rooms/WhoIsTypingTile.js b/src/components/views/rooms/WhoIsTypingTile.js
index 80ac64ec3e..ee383575c4 100644
--- a/src/components/views/rooms/WhoIsTypingTile.js
+++ b/src/components/views/rooms/WhoIsTypingTile.js
@@ -29,7 +29,7 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-
+        onVisible: PropTypes.func,
         // Number of names to display in typing indication. E.g. set to 3, will
         // result in "X, Y, Z and 100 others are typing."
         whoIsTypingLimit: PropTypes.number,
@@ -51,6 +51,15 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
     },
 
+    componentDidUpdate: function(_, prevState) {
+        if (this.props.onVisible &&
+            !prevState.usersTyping.length &&
+            this.state.usersTyping.length)
+        {
+            this.props.onVisible();
+        }
+    },
+
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
         const client = MatrixClientPeg.get();