Hacky fix for Safari's stupid autocorrect breaking react-select

keystonejs · Jan 25, 2017 · 83698a1 · 83698a1
1 parent 6162bfc
commit 83698a1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git 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
@@ -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>
 		);
 	},