removeSelected: bool

When `removeSelected` is set to `false` you can add same item multiple times Changed removal logic to remove values based on position
JedWatson · Sep 29, 2017 · 430bf2c · 430bf2c
1 parent 7523c20
commit 430bf2c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/lib/Select.js b/lib/Select.js
@@ -660,11 +660,10 @@ var Select = function (_React$Component) {
 		}
 	}, {
 		key: 'removeValue',
-		value: function removeValue(value) {
+		value: function removeValue(index) {
 			var valueArray = this.getValueArray(this.props.value);
-			this.setValue(valueArray.filter(function (i) {
-				return i !== value;
-			}));
+			valueArray.splice(index, 1);
+			this.setValue(valueArray);
 			this.focus();
 		}
 	}, {
@@ -845,7 +844,9 @@ var Select = function (_React$Component) {
 							disabled: _this5.props.disabled || value.clearableValue === false,
 							key: 'value-' + i + '-' + value[_this5.props.valueKey],
 							onClick: onClick,
-							onRemove: _this5.removeValue,
+							onRemove: function onRemove() {
+								return _this5.removeValue(i);
+							},
 							value: value
 						},
 						renderLabel(value, i),
@@ -1120,7 +1121,7 @@ var Select = function (_React$Component) {
 			var _this9 = this;
 
 			var valueArray = this.getValueArray(this.props.value);
-			var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
+			var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
 			var isOpen = this.state.isOpen;
 			if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
 			var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
@@ -1255,6 +1256,7 @@ Select.propTypes = {
 	options: _propTypes2.default.array, // array of options
 	pageSize: _propTypes2.default.number, // number of entries to page when using page up/down keys
 	placeholder: stringOrNode, // field placeholder, displayed when there's no value
+	removeSelected: _propTypes2.default.bool, // whether the selected option is removed from the dropdown on multi selects
 	required: _propTypes2.default.bool, // applies HTML5 required attribute when needed
 	resetValue: _propTypes2.default.any, // value to use when you clear the control
 	scrollMenuIntoView: _propTypes2.default.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged
@@ -1305,6 +1307,7 @@ Select.defaultProps = {
 	optionComponent: _Option2.default,
 	pageSize: 5,
 	placeholder: 'Select...',
+	removeSelected: true,
 	required: false,
 	scrollMenuIntoView: true,
 	searchable: true,

diff --git a/src/Select.js b/src/Select.js
@@ -560,9 +560,10 @@ class Select extends React.Component {
 		this.setValue(this.props.multi ? valueArray.slice(0, valueArray.length - 1) : null);
 	}
 
-	removeValue (value) {
+	removeValue (index) {
 		var valueArray = this.getValueArray(this.props.value);
-		this.setValue(valueArray.filter(i => i !== value));
+		valueArray.splice(index,1);
+		this.setValue(valueArray);
 		this.focus();
 	}
 
@@ -719,7 +720,7 @@ class Select extends React.Component {
 						disabled={this.props.disabled || value.clearableValue === false}
 						key={`value-${i}-${value[this.props.valueKey]}`}
 						onClick={onClick}
-						onRemove={this.removeValue}
+						onRemove={() => this.removeValue(i)}
 						value={value}
 					>
 						{renderLabel(value, i)}
@@ -979,7 +980,7 @@ class Select extends React.Component {
 
 	render () {
 		let valueArray = this.getValueArray(this.props.value);
-		let options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
+		let options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null);
 		let isOpen = this.state.isOpen;
 		if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
 		const focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
@@ -1107,6 +1108,7 @@ Select.propTypes = {
 	options: PropTypes.array,             // array of options
 	pageSize: PropTypes.number,           // number of entries to page when using page up/down keys
 	placeholder: stringOrNode,            // field placeholder, displayed when there's no value
+	removeSelected: PropTypes.bool,       // whether the selected option is removed from the dropdown on multi selects
 	required: PropTypes.bool,             // applies HTML5 required attribute when needed
 	resetValue: PropTypes.any,            // value to use when you clear the control
 	scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
@@ -1157,6 +1159,7 @@ Select.defaultProps = {
 	optionComponent: Option,
 	pageSize: 5,
 	placeholder: 'Select...',
+	removeSelected: true,
 	required: false,
 	scrollMenuIntoView: true,
 	searchable: true,