From 0ee697c9edf7f9a00fb419f7465d5fc85e8c1cd0 Mon Sep 17 00:00:00 2001
From: Alyssa Biasi <alyssa.biasi@rea-group.com>
Date: Tue, 1 Dec 2015 16:05:30 +1100
Subject: [PATCH] Allow HTML elements to be used as a placeholder

---
 examples/src/app.js                         | 2 +-
 examples/src/components/CustomComponents.js | 9 +++++++--
 src/Async.js                                | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/examples/src/app.js b/examples/src/app.js
index ed588679f0..b9e0c193b3 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -18,7 +18,7 @@ ReactDOM.render(
 		<Contributors label="Contributors (Async)" />
 		<NumericSelect label="Numeric Values" />
 		<CustomRender label="Custom Render Methods"/>
-		<CustomComponents label="Custom Option and Value Components" />
+		<CustomComponents label="Custom Placeholder, Option and Value Components" />
 		{/*
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's NOT in the list, then hit return" />
 		*/}
diff --git a/examples/src/components/CustomComponents.js b/examples/src/components/CustomComponents.js
index dfe329b529..031cc12513 100644
--- a/examples/src/components/CustomComponents.js
+++ b/examples/src/components/CustomComponents.js
@@ -91,6 +91,8 @@ const UsersField = React.createClass({
 		this.setState({ value });
 	},
 	render () {
+		var placeholder = <span>&#9786; Select User</span>;
+
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
@@ -98,11 +100,14 @@ const UsersField = React.createClass({
 					onChange={this.setValue}
 					optionComponent={GravatarOption}
 					options={USERS}
-					placeholder="Select user"
+					placeholder={placeholder}
 					value={this.state.value}
 					valueComponent={GravatarValue}
 					/>
-				<div className="hint">This example implements custom Option and Value components to render a Gravatar image for each user based on their email</div>
+				<div className="hint">
+					This example implements custom Option and Value components to render a Gravatar image for each user based on their email.
+					It also demonstrates rendering HTML elements as the placeholder.
+				</div>
 			</div>
 		);
 	}
diff --git a/src/Async.js b/src/Async.js
index a8ec0c7a9a..78cc95cdc2 100644
--- a/src/Async.js
+++ b/src/Async.js
@@ -46,7 +46,10 @@ const Async = React.createClass({
 		loadingPlaceholder: React.PropTypes.string,     // replaces the placeholder while options are loading
 		minimumInput: React.PropTypes.number,           // the minimum number of characters that trigger loadOptions
 		noResultsText: React.PropTypes.string,          // placeholder displayed when there are no matching search results (shared with Select)
-		placeholder: React.PropTypes.string,            // field placeholder, displayed when there's no value (shared with Select)
+		placeholder: React.PropTypes.oneOfType([        // field placeholder, displayed when there's no value (shared with Select)
+			React.PropTypes.string,
+			React.PropTypes.node
+		]),
 		searchingText: React.PropTypes.string,          // message to display while options are loading
 		searchPromptText: React.PropTypes.string,       // label to prompt for search input
 	},