From 83698a120bec2243361fb5499d1fe47ebc1dd4cf Mon Sep 17 00:00:00 2001
From: Jed Watson <jed.watson@me.com>
Date: Wed, 25 Jan 2017 17:06:07 +1100
Subject: [PATCH] Hacky fix for Safari's stupid autocorrect breaking
 react-select

---
 .../types/relationship/RelationshipField.js   | 26 +++++++++++--------
 fields/types/select/SelectField.js            | 18 ++++++++-----
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/fields/types/relationship/RelationshipField.js b/fields/types/relationship/RelationshipField.js
index e527b9f8f5..e757bd8494 100644
--- a/fields/types/relationship/RelationshipField.js
+++ b/fields/types/relationship/RelationshipField.js
@@ -191,17 +191,21 @@ module.exports = Field.create({
 
 	renderSelect (noedit) {
 		return (
-			<Select.Async
-				multi={this.props.many}
-				disabled={noedit}
-				loadOptions={this.loadOptions}
-				labelKey="name"
-				name={this.getInputName(this.props.path)}
-				onChange={this.valueChanged}
-				simpleValue
-				value={this.state.value}
-				valueKey="id"
-			/>
+			<div>
+				{/* This input element fools Safari's autocorrect in certain situations that completely break react-select */}
+				<input type="text" style={{ position: 'absolute', width: 1, height: 1, zIndex: -1, opacity: 0 }} tabIndex="-1"/>
+				<Select.Async
+					multi={this.props.many}
+					disabled={noedit}
+					loadOptions={this.loadOptions}
+					labelKey="name"
+					name={this.getInputName(this.props.path)}
+					onChange={this.valueChanged}
+					simpleValue
+					value={this.state.value}
+					valueKey="id"
+				/>
+			</div>
 		);
 	},
 
diff --git a/fields/types/select/SelectField.js b/fields/types/select/SelectField.js
index 269684aaf2..5f56ee0d1e 100644
--- a/fields/types/select/SelectField.js
+++ b/fields/types/select/SelectField.js
@@ -51,13 +51,17 @@ module.exports = Field.create({
 			: val;
 
 		return (
-			<Select
-				simpleValue
-				name={this.getInputName(path)}
-				value={value}
-				options={options}
-				onChange={this.valueChanged}
-			/>
+			<div>
+				{/* This input element fools Safari's autocorrect in certain situations that completely break react-select */}
+				<input type="text" style={{ position: 'absolute', width: 1, height: 1, zIndex: -1, opacity: 0 }} tabIndex="-1"/>
+				<Select
+					simpleValue
+					name={this.getInputName(path)}
+					value={value}
+					options={options}
+					onChange={this.valueChanged}
+				/>
+			</div>
 		);
 	},