fix autoComplete for demo

JedWatson · Dec 20, 2017 · 81d5d46 · 81d5d46
1 parent c2cd496
commit 81d5d46
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 55 deletions.
diff --git a/less/control.less b/less/control.less
@@ -27,6 +27,19 @@
 .Select {
 	position: relative;
 
+	input:-webkit-autofill {
+		// Expose a hook for JavaScript when autofill is shown
+		// JavaScript can capture 'animationstart' events
+		// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+		animation-name: onAutoFillStart;
+	}
+
+	input:not(:-webkit-autofill) {
+		// Expose a hook for JS onAutoFillCancel
+		// JavaScript can capture 'animationstart' events
+		animation-name: onAutoFillCancel;
+	}
+
 	// disable some browser-specific behaviours that break the input
 	input::-webkit-contacts-auto-fill-button,
 	input::-webkit-credentials-auto-fill-button {
@@ -219,19 +232,6 @@
 		padding: ((@select-input-internal-height - 14) / 2 - 2) 0 ((@select-input-internal-height - 14) / 2 + 2);  /* For IE 8 compatibility */
 		-webkit-appearance: none;
 
-		&:-webkit-autofill {
-			// Expose a hook for JavaScript when autofill is shown
-			// JavaScript can capture 'animationstart' events
-			// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-			animation-name: onAutoFillStart;
-		}
-
-		&:not(:-webkit-autofill) {
-			// Expose a hook for JS onAutoFillCancel
-			// JavaScript can capture 'animationstart' events
-			animation-name: onAutoFillCancel;
-		}
-
 		.is-focused & {
 			cursor: text;
 		}
@@ -346,20 +346,6 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-
-
-	&:-webkit-autofill {
-		// Expose a hook for JavaScript when autofill is shown
-		// JavaScript can capture 'animationstart' events
-		// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-		animation-name: onAutoFillStart;
-	}
-
-	&:not(:-webkit-autofill) {
-    // Expose a hook for JS onAutoFillCancel
-    // JavaScript can capture 'animationstart' events
-    animation-name: onAutoFillCancel;
-	}
 }
 
 // Animation

diff --git a/scss/control.scss b/scss/control.scss
@@ -12,6 +12,19 @@
 .Select {
 	position: relative;
 
+	input:-webkit-autofill {
+		// Expose a hook for JavaScript when autofill is shown
+		// JavaScript can capture 'animationstart' events
+		// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+		animation-name: onAutoFillStart;
+	}
+
+	input:not(:-webkit-autofill) {
+		// Expose a hook for JS onAutoFillCancel
+		// JavaScript can capture 'animationstart' events
+		animation-name: onAutoFillCancel;
+	}
+
 	// disable some browser-specific behaviours that break the input
 	input::-webkit-contacts-auto-fill-button,
 	input::-webkit-credentials-auto-fill-button {
@@ -205,19 +218,6 @@
 		padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2);  /* For IE 8 compatibility */
 		-webkit-appearance: none;
 
-		&:-webkit-autofill {
-			// Expose a hook for JavaScript when autofill is shown
-			// JavaScript can capture 'animationstart' events
-			// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-			animation-name: onAutoFillStart;
-		}
-
-		&:not(:-webkit-autofill) {
-			// Expose a hook for JS onAutoFillCancel
-			// JavaScript can capture 'animationstart' events
-			animation-name: onAutoFillCancel;
-		}
-
 		.is-focused & {
 			cursor: text;
 		}
@@ -323,19 +323,6 @@
 	padding: 0;
 	position: absolute;
 	width: 1px;
-
-	&:-webkit-autofill {
-		// Expose a hook for JavaScript when autofill is shown
-		// JavaScript can capture 'animationstart' events
-		// @see https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-		animation-name: onAutoFillStart;
-	}
-
-	&:not(:-webkit-autofill) {
-    // Expose a hook for JS onAutoFillCancel
-    // JavaScript can capture 'animationstart' events
-    animation-name: onAutoFillCancel;
-	}
 }
 
 // Animation

diff --git a/src/Select.js b/src/Select.js
@@ -95,7 +95,7 @@ class Select extends React.Component {
 		if (this.props.autoFocus || this.props.autofocus) {
 			this.focus();
 		}
-		if (!this.props.multi) {
+		if (this.isAutoCompleteEnabled()) {
 			this.addAutoFillListener();
 		}
 	}
@@ -864,7 +864,7 @@ class Select extends React.Component {
 		const inputProps = {
 			...this.props.inputProps,
 			role: 'combobox',
-			autoComplete: useAutoComplete ? this.props.autoComplete : 'off',
+			autoComplete: useAutoComplete ? this.props.autoComplete : null,
 			'aria-expanded': '' + isOpen,
 			'aria-owns': ariaOwns,
 			'aria-haspopup': '' + isOpen,