Merge pull request #2646 from Automattic/update/site-selector-enter

Site Selector: enter key select

client/components/site-selector/index.jsx

@@ -63,6 +63,20 @@ export default React.createClass( {
 		this.setState( { search: terms } );
 	},
 
+	onKeyDown( event ) {
+		var filteredSites;
+
+		if ( event.keyCode === 13 ) {
+			// enter key
+			filteredSites = this.getFilteredSites();
+
+			if ( filteredSites.length === 1 && this.props.siteBasePath ) {
+				this.onSiteSelect( filteredSites[ 0 ].slug, event );
+				page( this.getSiteBasePath( filteredSites[ 0 ] ) + '/' + filteredSites[ 0 ].slug );
+			}
+		}
+	},
+
 	onSiteSelect( siteSlug, event ) {
 		this.closeSelector();
 		this.props.onSiteSelect( siteSlug );
@@ -76,6 +90,7 @@ export default React.createClass( {
 	},
 
 	closeSelector() {
+		this.refs.siteSearch.clear();
 		this.refs.siteSearch.blur();
 	},
 
@@ -112,6 +127,22 @@ export default React.createClass( {
 		return siteBasePath;
 	},
 
+	getFilteredSites() {
+		var sites;
+
+		if ( this.state.search ) {
+			sites = this.props.sites.search( this.state.search );
+		} else {
+			sites = this.shouldShowGroups() ? this.props.sites.getVisibleAndNotRecent() : this.props.sites.getVisible();
+		}
+
+		if ( this.props.filter ) {
+			sites = sites.filter( this.props.filter );
+		}
+
+		return sites;
+	},
+
 	isSelected( site ) {
 		var selectedSite = this.props.selected || this.props.sites.selected;
 		return selectedSite === site.domain || selectedSite === site.slug;
@@ -126,22 +157,13 @@ export default React.createClass( {
 	},
 
 	renderSites() {
-		var sites, siteElements;
+		var sites = this.getFilteredSites(),
+			siteElements;
 
 		if ( ! this.props.sites.initialized ) {
 			return <SitePlaceholder key="site-placeholder" />;
 		}
 
-		if ( this.state.search ) {
-			sites = this.props.sites.search( this.state.search );
-		} else {
-			sites = this.shouldShowGroups() ? this.props.sites.getVisibleAndNotRecent() : this.props.sites.getVisible();
-		}
-
-		if ( this.props.filter ) {
-			sites = sites.filter( this.props.filter );
-		}
-
 		// Render sites
 		siteElements = sites.map( function( site ) {
 			var siteHref;
@@ -256,6 +278,7 @@ export default React.createClass( {
 				<Search
 					ref="siteSearch"
 					onSearch={ this.onSearch }
+					onKeyDown={ this.onKeyDown }
 					autoFocus={ this.props.autoFocus }
 					disabled={ ! this.props.sites.initialized }
 				/>