From 39e9d52c042521aa430bc6a66a517887b598a6d8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 21 Mar 2018 15:58:14 +0000
Subject: [PATCH] Make sure to proxy special prop `ref`

---
 src/components/structures/ScrollPanel.js        | 17 ++++++++++++++---
 .../views/elements/GeminiScrollbarWrapper.js    |  2 +-
 src/components/views/rooms/RoomList.js          |  9 +++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 722dc2251f..0fdbc9a349 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -19,6 +19,7 @@ const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 import Promise from 'bluebird';
 import { KeyCode } from '../../Keyboard';
+import sdk from '../../index.js';
 
 const DEBUG_SCROLL = false;
 // var DEBUG_SCROLL = true;
@@ -223,7 +224,7 @@ module.exports = React.createClass({
     onResize: function() {
         this.props.onResize();
         this.checkScroll();
-        this.refs.geminiPanel.forceUpdate();
+        if (this._gemScroll) this._gemScroll.forceUpdate();
     },
 
     // after an update to the contents of the panel, check that the scroll is
@@ -664,7 +665,17 @@ module.exports = React.createClass({
             throw new Error("ScrollPanel._getScrollNode called when unmounted");
         }
 
-        return this.refs.geminiPanel.scrollbar.getViewElement();
+        if (!this._gemScroll) {
+            // Likewise, we should have the ref by this point, but if not
+            // turn the NPE into something meaningful.
+            throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
+        }
+
+        return this._gemScroll.scrollbar.getViewElement();
+    },
+
+    _collectGeminiScroll: function(gemScroll) {
+        this._gemScroll = gemScroll;
     },
 
     render: function() {
@@ -672,7 +683,7 @@ module.exports = React.createClass({
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbarWrapper autoshow={true} ref="geminiPanel"
+        return (<GeminiScrollbarWrapper autoshow={true} wrappedRef={this._collectGeminiScroll}
                 onScroll={this.onScroll} onResize={this.onResize}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
diff --git a/src/components/views/elements/GeminiScrollbarWrapper.js b/src/components/views/elements/GeminiScrollbarWrapper.js
index 1de82bebc2..c56ff67c9c 100644
--- a/src/components/views/elements/GeminiScrollbarWrapper.js
+++ b/src/components/views/elements/GeminiScrollbarWrapper.js
@@ -26,7 +26,7 @@ class GeminiScrollbarWrapper extends React.Component {
         // By default GeminiScrollbar allows native scrollbars to be used
         // on macOS. Use forceGemini to enable Gemini's non-native
         // scrollbars on all OSs.
-        return <GeminiScrollbar forceGemini={true} {...this.props}>
+        return <GeminiScrollbar ref={this.props.wrappedRef} forceGemini={true} {...this.props}>
             { this.props.children }
         </GeminiScrollbar>;
     }
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index ef1a3adc1d..acf04831e8 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -507,7 +507,8 @@ module.exports = React.createClass({
     onShowMoreRooms: function() {
         // kick gemini in the balls to get it to wake up
         // XXX: uuuuuuugh.
-        this.refs.gemscroll.forceUpdate();
+        if (!this._gemScroll) return;
+        this._gemScroll.forceUpdate();
     },
 
     _getEmptyContent: function(section) {
@@ -598,6 +599,10 @@ module.exports = React.createClass({
         return ret;
     },
 
+    _collectGemini(gemScroll) {
+        this._gemScroll = gemScroll;
+    },
+
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
@@ -605,7 +610,7 @@ module.exports = React.createClass({
         const self = this;
         return (
             <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
-                 autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
+                autoshow={true} onScroll={self._whenScrolling} wrappedRef={this._collectGemini}>
             <div className="mx_RoomList">
                 <RoomSubList list={[]}
                              extraTiles={this._makeGroupInviteTiles()}