Sync up with react select

HISTORY.md

@@ -1,5 +1,10 @@
 # React-Select-Plus
 
+## Next
+
+* fixed; issues synchronising options props in `Async`, thanks [cbergmiller](https://github.com/cbergmiller)
+* fixed; backspace handling for non-multi select controls, thanks [Jeremy Liberman](https://github.com/MrLeebo)
+
 ## v1.0.0-rc.5 / 2017-05-25
 
 * fixed; Allow `falsey` values to be clearable, thanks [Simon Gaestel](https://github.com/sgaestel)

ISSUE_TEMPLATE.md

@@ -1,9 +1,24 @@
 ### Thanks for using react-select!
 
-If you are reporting an error please include a test case that demonstrates the issue you're reporting!
+Before creating an issue...
+
+# Are you asking a question?
+Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag
+
+
+# Are you reporting a bug or runtime error?
+Please include a test case that demonstrates the issue you're reporting!
 This is very helpful to maintainers in order to help us see the issue you're seeing.
 
 Here is a Plunker you can fork that has react-select loaded and supports JSX syntax:
-https://plnkr.co/edit/HTmtER9AMNcPoWhXV707?p=preview
+https://plnkr.co/edit/dHygFMWWqVwaRAfpEmbn?p=preview
 
 You may also find the [online Babel tool](https://babeljs.io/repl/) quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.
+
+
+# Are you making a feature request?
+Provide as much information as possible about your requested feature. Here are a few questions you may consider answering:
+
+*   What's your use case? (Tell us about your application and what problem you're trying to solve.)
+*   What interface do you have in mind? (What new properties or methods do you think might be helpful?)
+*   Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)

README.md

@@ -74,7 +74,7 @@ var options = [
 ];
 
 function logChange(val) {
-  console.log("Selected: " + val);
+  console.log("Selected: " + JSON.stringify(val));
 }
 
 <Select
@@ -268,7 +268,7 @@ The default `filterOptions` method scans the options array for matches each time
 This works well but can get slow as the options array grows to several hundred objects.
 For larger options lists a custom filter function like [`react-select-fast-filter-options`](https://github.com/bvaughn/react-select-fast-filter-options) will produce better results.
 
-### Effeciently rendering large lists with windowing
+### Efficiently rendering large lists with windowing
 
 The `menuRenderer` property can be used to override the default drop-down list of options.
 This should be done when the list is large (hundreds or thousands of items) for faster rendering.
@@ -294,7 +294,8 @@ The custom `menuRenderer` property accepts the following named parameters:
 
 ### Updating input values with onInputChange
 
-You can manipulate the input using the onInputChange and returning a new value.
+You can manipulate the input by providing a `onInputChange` callback that returns a new value.
+**Please note:** When you want to use `onInputChange` only to listen to the input updates, you still have to return the unchanged value!
 
 ```js
 function cleanInput(inputValue) {
@@ -377,7 +378,7 @@ function onInputKeyDown(event) {
 | onClose | func | undefined | handler for when the menu closes: `function () {}` |
 | onCloseResetsInput | bool | true | whether to clear input when closing the menu through the arrow |
 | onFocus | func | undefined | onFocus handler: `function(event) {}` |
-| onInputChange | func | undefined | onInputChange handler: `function(inputValue) {}` |
+| onInputChange | func | undefined | onInputChange handler/interceptor: `function(inputValue: string): string` |
 | onInputKeyDown | func | undefined | input keyDown handler; call `event.preventDefault()` to override default `Select` behavior: `function(event) {}` |
 | onOpen | func | undefined | handler for when the menu opens: `function () {}` |
 | onValueClick | func | undefined | onClick handler for value labels: `function (value, event) {}` |
@@ -391,6 +392,7 @@ function onInputKeyDown(event) {
 | loadingPlaceholder | string\|node | 'Loading...' | label to prompt for loading search result |
 | tabSelectsValue | bool | true | whether to select the currently focused value when the `[tab]` key is pressed |
 | value | any | undefined | initial field value |
+| valueComponent | func | <Value /> | function which returns a custom way to render/manage the value selected `<CustomValue />` |
 | valueKey | string | 'value' | the option property to use for the value |
 | valueRenderer | func | undefined | function which returns a custom way to render the value selected `function (option) {}` |
 

gulpfile.js

@@ -4,7 +4,7 @@ var initGulpTasks = require('react-component-gulp-tasks');
 var taskConfig = {
 
 	component: {
-		name: 'Select',
+		name: 'index',
 		dependencies: [
 			'classnames',
 			'react-input-autosize',

package.json

@@ -11,7 +11,6 @@
     "url": "https://github.com/HubSpot/react-select-plus.git"
   },
   "dependencies": {
-    "create-react-class": "^15.5.2",
     "classnames": "^2.2.4",
     "react-input-autosize": "^1.1.3",
     "prop-types": "^15.5.8"
@@ -21,6 +20,7 @@
     "babel-eslint": "^4.1.3",
     "chai": "^3.5.0",
     "coveralls": "^2.11.12",
+    "create-react-class": "^15.5.2",
     "eslint": "^1.10.3",
     "eslint-plugin-react": "^3.15.0",
     "gulp": "^3.9.1",

src/Async.js

@@ -68,15 +68,12 @@ export default class Async extends Component {
 		}
 	}
 
-	componentWillUpdate (nextProps, nextState) {
-		const propertiesToSync = ['options'];
-		propertiesToSync.forEach((prop) => {
-			if (this.props[prop] !== nextProps[prop]) {
-				this.setState({
-					[prop]: nextProps[prop]
-				});
-			}
-		});
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.options !== this.props.options) {
+			this.setState({
+				options: nextProps.options,
+			});
+		}
 	}
 
 	clearOptions() {
@@ -134,26 +131,28 @@ export default class Async extends Component {
 				isLoading: true
 			});
 		}
-
-		return inputValue;
 	}
 
 	_onInputChange (inputValue) {
 		const { ignoreAccents, ignoreCase, onInputChange } = this.props;
+		let transformedInputValue = inputValue;
 
 		if (ignoreAccents) {
-			inputValue = stripDiacritics(inputValue);
+			transformedInputValue = stripDiacritics(transformedInputValue);
 		}
 
 		if (ignoreCase) {
-			inputValue = inputValue.toLowerCase();
+			transformedInputValue = transformedInputValue.toLowerCase();
 		}
 
 		if (onInputChange) {
-			onInputChange(inputValue);
+			onInputChange(transformedInputValue);
 		}
 
-		return this.loadOptions(inputValue);
+		this.loadOptions(transformedInputValue);
+
+		// Return the original input value to avoid modifying the user's view of the input while typing.
+		return inputValue;
 	}
 
 	inputValue() {

src/AsyncCreatable.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import createClass from 'create-react-class';
 import Select from './Select';
+import Async from './Async';
+import Creatable from './Creatable';
 
 function reduce(obj, props = {}){
   return Object.keys(obj)
@@ -11,18 +12,17 @@ function reduce(obj, props = {}){
   }, props);
 }
 
-const AsyncCreatable = createClass({
-	displayName: 'AsyncCreatableSelect',
+class AsyncCreatableSelect extends React.Component {
 
 	focus () {
 		this.select.focus();
-	},
+	}
 
 	render () {
 		return (
-			<Select.Async {...this.props}>
+			<Async {...this.props}>
 				{(asyncProps) => (
-					<Select.Creatable {...this.props}>
+					<Creatable {...this.props}>
 						{(creatableProps) => (
 							<Select
 								{...reduce(asyncProps, reduce(creatableProps, {}))}
@@ -37,11 +37,11 @@ const AsyncCreatable = createClass({
 								}}
 							/>
 						)}
-					</Select.Creatable>
+					</Creatable>
 				)}
-			</Select.Async>
+			</Async>
 		);
 	}
-});
+};
 
-module.exports = AsyncCreatable;
+module.exports = AsyncCreatableSelect;