move-scrolling-logic-to-parent.diff

diff --git a/client/components/site-selector/index.jsx b/client/components/site-selector/index.jsx
index 22e19a3..c1e75bd 100644
--- a/client/components/site-selector/index.jsx
+++ b/client/components/site-selector/index.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
+	ReactDom = require( 'react-dom' ),
 	page = require( 'page' ),
 	noop = require( 'lodash/utility/noop' ),
 	classNames = require( 'classnames' );
@@ -51,6 +52,32 @@ module.exports = React.createClass( {
 		};
 	},
 
+	componentDidMount: function() {
+		const selected = this.props.selected || this.props.sites.selected;
+		if ( selected ) {
+			this.scrollSelectedSiteIntoView();
+		}
+	},
+
+	componentDidUpdate: function( prevProps, prevState ) {
+		const selected = this.props.selected || this.props.sites.selected;
+		const lastSelected = prevProps.selected || prevProps.sites.selected;
+		if ( selected !== lastSelected ) {
+			this.scrollSelectedSiteIntoView();
+		}
+	},
+
+	scrollSelectedSiteIntoView: function() {
+		const node = ReactDom.findDOMNode( this.refs.selectedSite );
+		if ( node ) {
+			let scrollTop = node.offsetTop;
+			if ( node.previousSibling ) {
+				scrollTop -= node.previousSibling.offsetHeight / 2;
+			}
+			this.refs.sites.scrollTop = scrollTop;
+		}
+	},
+
 	getCount: function() {
 		return user.get().visible_site_count;
 	},
@@ -163,8 +190,11 @@ module.exports = React.createClass( {
 				return;
 			}
 
+			const siteRef = isSelected ? 'selectedSite' : null;
+
 			return (
 				<Site
+					ref={ siteRef }
 					site={ site }
 					href={ this.props.siteBasePath ? siteHref : null }
 					key={ 'site-' + site.ID }
@@ -218,7 +248,7 @@ module.exports = React.createClass( {
 			<div className={ selectorClass } ref="siteSelector">
 				<Search ref="siteSearch" onSearch={ this.onSearch } autoFocus={ this.props.autoFocus } disabled={ ! sitesInitialized } />
 
-				<div className="site-selector__sites">
+				<div className="site-selector__sites" ref="sites">
 					{ siteElements.length ? siteElements :
 						<div className="site-selector__no-results">{ this.translate( 'No sites found' ) }</div>
 					}
diff --git a/client/my-sites/site/index.jsx b/client/my-sites/site/index.jsx
index 90179ef..336e19d 100644
--- a/client/my-sites/site/index.jsx
+++ b/client/my-sites/site/index.jsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	ReactDom = require( 'react-dom' ),
 	classNames = require( 'classnames' ),
 	noop = require( 'lodash/utility/noop' );
 
@@ -15,27 +14,6 @@ var SiteIcon = require( 'components/site-icon' ),
 module.exports = React.createClass( {
 	displayName: 'Site',
 
-	componentDidMount: function() {
-		if ( this.props.isSelected ) {
-			this.scrollIntoView();
-		}
-	},
-
-	componentDidUpdate: function( prevProps, prevState ) {
-		if ( this.props.isSelected && ! prevProps.isSelected ) {
-			this.scrollIntoView();
-		}
-	},
-
-	scrollIntoView: function() {
-		var node = ReactDom.findDOMNode( this ),
-			parentScrollTop = node.offsetTop;
-		if ( node.previousSibling ) {
-			parentScrollTop -= node.previousSibling.offsetHeight / 2;
-		}
-		node.parentNode.scrollTop = parentScrollTop;
-	},
-
 	getDefaultProps: function() {
 		return {
 			// onSelect callback