From b85becf903671084b0375d2b3868915ef7087b87 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 2 Apr 2016 08:57:50 -0700
Subject: [PATCH 1/3] Fixed VirtualScroll demo on iOS and touch devices.

---
 examples/src/components/Cities.js | 1 +
 examples/src/example.less         | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/examples/src/components/Cities.js b/examples/src/components/Cities.js
index a37012974f..46b6579375 100644
--- a/examples/src/components/Cities.js
+++ b/examples/src/components/Cities.js
@@ -59,6 +59,7 @@ var CitiesField = React.createClass({
         {({ width }) => (
           <VirtualScroll
             ref="VirtualScroll"
+            className="virtual-scroll"
             height={height}
             rowHeight={OPTION_HEIGHT}
             rowRenderer={(index) => (
diff --git a/examples/src/example.less b/examples/src/example.less
index 27dcc00006..801c1fc5d1 100644
--- a/examples/src/example.less
+++ b/examples/src/example.less
@@ -250,3 +250,7 @@ h6, .h6 {
 	margin: 15px 0;
 	color: #666;
 }
+
+.virtual-scroll {
+	z-index: 1;
+}

From 95367e78b36c331b7655d048a8143fc73d187cbf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 2 Apr 2016 16:31:54 -0700
Subject: [PATCH 2/3] Cleaned up Cities example and added
 react-virtualized-select HOC

---
 examples/src/app.js               |  2 +-
 examples/src/components/Cities.js | 95 +++++--------------------------
 examples/src/index.html           |  3 +-
 package.json                      |  3 +-
 4 files changed, 19 insertions(+), 84 deletions(-)

diff --git a/examples/src/app.js b/examples/src/app.js
index a7b87ad788..18aeccb377 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -14,7 +14,7 @@ import States from './components/States';
 
 ReactDOM.render(
 	<div>
-		<Cities label="Cities" searchable />
+		<Cities label="Cities" />
 		<States label="States" searchable />
 		<Multiselect label="Multiselect" />
 		<Contributors label="Contributors (Async)" />
diff --git a/examples/src/components/Cities.js b/examples/src/components/Cities.js
index 46b6579375..1462e63e96 100644
--- a/examples/src/components/Cities.js
+++ b/examples/src/components/Cities.js
@@ -1,111 +1,44 @@
 import React from 'react';
-import Select from 'react-select';
-import { AutoSizer, VirtualScroll } from 'react-virtualized';
+import VirtualizedSelect from 'react-virtualized-select';
 
 const DATA = require('../data/cities');
 
-const OPTION_HEIGHT = 35;
-const MAX_OPTIONS_HEIGHT = 200;
-
 var CitiesField = React.createClass({
 	displayName: 'CitiesField',
-	propTypes: {
-		label: React.PropTypes.string,
-		searchable: React.PropTypes.bool,
-	},
-	getDefaultProps () {
-		return {
-			label: 'Cities:',
-			searchable: true,
-		};
-	},
-	getInitialState () {
-		return {
-			country: 'AU',
-			disabled: false,
-			searchable: this.props.searchable,
-			selectValue: 'new-south-wales',
-			clearable: true,
-		};
-	},
-	switchCountry (e) {
-		var newCountry = e.target.value;
-		console.log('Country changed to ' + newCountry);
+	updateValue (newValue) {
 		this.setState({
-			country: newCountry,
-			selectValue: null
+			selectValue: newValue
 		});
 	},
+	getInitialState () {
+		return {};
+	},
 	updateValue (newValue) {
 		console.log('State changed to ' + newValue);
 		this.setState({
 			selectValue: newValue
 		});
 	},
-	focusStateSelect () {
-		this.refs.stateSelect.focus();
-	},
-	toggleCheckbox (e) {
-		let newState = {};
-		newState[e.target.name] = e.target.checked;
-		this.setState(newState);
-	},
-	renderMenu({ focusedOption, focusOption, labelKey, options, selectValue, valueArray }) {
-		const focusedOptionIndex = options.indexOf(focusedOption);
-		const height = Math.min(MAX_OPTIONS_HEIGHT, options.length * OPTION_HEIGHT);
-
-		return (
-      <AutoSizer disableHeight>
-        {({ width }) => (
-          <VirtualScroll
-            ref="VirtualScroll"
-            className="virtual-scroll"
-            height={height}
-            rowHeight={OPTION_HEIGHT}
-            rowRenderer={(index) => (
-            	<div
-            		onMouseOver={() => focusOption(options[index])}
-            		onClick={() => selectValue(options[index])}
-            		style={{
-            			backgroundColor: options[index] === focusedOption ? '#eee' : '#fff',
-            			height: OPTION_HEIGHT,
-            			display: 'flex',
-            			alignItems: 'center',
-            			padding: '0 .5rem'
-            		}}
-            	>
-            		{options[index][labelKey]}
-            	</div>
-            )}
-            rowsCount={options.length}
-            scrollToIndex={focusedOptionIndex}
-            width={width}
-          />
-        )}
-      </AutoSizer>
-		);
-	},
 	render () {
 		var options = DATA.CITIES;
 		return (
 			<div className="section">
-				<h3 className="section-heading">World's Largest Cities</h3>
-				<h4>Uses react-virtualized to display data</h4>
-				<Select ref="stateSelect"
+				<h3 className="section-heading">Large Datasets</h3>
+				<VirtualizedSelect ref="citySelect"
 					autofocus
 					options={options}
 					simpleValue
-					clearable={this.state.clearable}
-					name="selected-state"
-					disabled={this.state.disabled}
+					clearable
+					name="select-city"
 					value={this.state.selectValue}
 					onChange={this.updateValue}
-					searchable={this.state.searchable}
+					searchable
 					labelKey="name"
 					valueKey="name"
-					menuStyle={{ overflow: 'hidden' }}
-					menuRenderer={this.renderMenu}
 				/>
+				<div className="hint">
+					Uses <a href="https://github.com/bvaughn/react-virtualized">react-virtualized</a> and <a href="https://github.com/bvaughn/react-virtualized-select/">react-virtualized-select</a> to display a list of the world's 1,000 largest cities.
+				</div>
 			</div>
 		);
 	}
diff --git a/examples/src/index.html b/examples/src/index.html
index c867e5fee7..7b685b1288 100644
--- a/examples/src/index.html
+++ b/examples/src/index.html
@@ -12,8 +12,9 @@
 	<meta property="og:site_name" content="React-Select">
 	<meta property="og:type" content="article">
 	<link rel="stylesheet" href="example.css">
-	<link rel="stylesheet" href="https://npmcdn.com/react-virtualized@6.0.2/styles.css">
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="stylesheet" href="https://npmcdn.com/react-virtualized/styles.css">
+	<link rel="stylesheet" href="https://npmcdn.com/react-virtualized-select/styles.css">
 </head>
 <body>
 	<header class="page-header">
diff --git a/package.json b/package.json
index 93066b3a85..da9bc66cc2 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "react-component-gulp-tasks": "^0.7.7",
     "react-dom": "^0.14 || ^15.0.0-rc || ^15.0.0",
     "react-gravatar": "^2.3.0",
-    "react-virtualized": "^6.0.2",
+    "react-virtualized": "^6.0.4",
+    "react-virtualized-select": "^0.0.2",
     "sinon": "^1.17.2",
     "unexpected": "^10.7.0",
     "unexpected-dom": "^3.0.2",

From 1492b1ee16333fed6284d5ea18560c1676aa84d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 2 Apr 2016 16:39:11 -0700
Subject: [PATCH 3/3] Fixed linting

---
 examples/src/components/Cities.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/examples/src/components/Cities.js b/examples/src/components/Cities.js
index 1462e63e96..ce63df712d 100644
--- a/examples/src/components/Cities.js
+++ b/examples/src/components/Cities.js
@@ -5,16 +5,10 @@ const DATA = require('../data/cities');
 
 var CitiesField = React.createClass({
 	displayName: 'CitiesField',
-	updateValue (newValue) {
-		this.setState({
-			selectValue: newValue
-		});
-	},
 	getInitialState () {
 		return {};
 	},
 	updateValue (newValue) {
-		console.log('State changed to ' + newValue);
 		this.setState({
 			selectValue: newValue
 		});