From 1d9b8a009ed837dc9d8030e00f6faf6253863231 Mon Sep 17 00:00:00 2001
From: Sebastian Uecker <sebastian.uecker@forum-is.de>
Date: Thu, 3 Nov 2016 11:09:12 +0100
Subject: [PATCH] Delete key removes an item when there is no input

---
 src/Select.js       |  8 ++++++++
 test/Select-test.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/Select.js b/src/Select.js
index 9c22206e7c..af42e94dc7 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -57,6 +57,7 @@ const Select = React.createClass({
 		clearAllText: stringOrNode,                 // title for the "clear" control when multi: true
 		clearValueText: stringOrNode,               // title for the "clear" control
 		clearable: React.PropTypes.bool,            // should it be possible to reset value
+		deleteRemoves: React.PropTypes.bool,     // whether backspace removes an item if there is no text input
 		delimiter: React.PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
 		disabled: React.PropTypes.bool,             // whether the Select is disabled or not
 		escapeClearsValue: React.PropTypes.bool,    // whether escape clears the value when the menu is closed
@@ -125,6 +126,7 @@ const Select = React.createClass({
 			clearable: true,
 			clearAllText: 'Clear all',
 			clearValueText: 'Clear value',
+			deleteRemoves: true,
 			delimiter: ',',
 			disabled: false,
 			escapeClearsValue: true,
@@ -520,6 +522,12 @@ const Select = React.createClass({
 				}
 				this.focusStartOption();
 			break;
+			case 46: // backspace
+				if (!this.state.inputValue && this.props.deleteRemoves) {
+					event.preventDefault();
+					this.popValue();
+				}
+			return;
 			default: return;
 		}
 		event.preventDefault();
diff --git a/test/Select-test.js b/test/Select-test.js
index 21866b2c17..fe3c6d2706 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -84,6 +84,10 @@ describe('Select', () => {
 		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 8, key: 'Backspace' });
 	};
 
+	var pressDelete = () => {
+		TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 46, key: 'Backspace' });
+	};
+
 	var pressUp = () => {
 		TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 38, key: 'ArrowUp' });
 	};
@@ -1796,6 +1800,32 @@ describe('Select', () => {
                 </span>);
 		});
 
+		it('removes the last selected option with delete', () => {
+
+			setValueProp(['four','three']);
+			onChange.reset();  // Ignore previous onChange calls
+			pressDelete();
+			expect(onChange, 'was called with', [{ label: 'Four', value: 'four' }]);
+		});
+
+		it('does not remove the last selected option with delete when deleteRemoves=false', () => {
+
+			// Disable delete
+			wrapper.setPropsForChild({
+				deleteRemoves: false,
+				value: ['four', 'three']
+			});
+			onChange.reset();  // Ignore previous onChange calls
+
+			pressDelete();
+			expect(onChange, 'was not called');
+			expect(instance, 'to contain',
+				<span className="Select-multi-value-wrapper">
+                    <div><span className="Select-value-label">Four</span></div>
+                    <div><span className="Select-value-label">Three</span></div>
+                </span>);
+		});
+
 		it('removes an item when clicking on the X', () => {
 
 			setValueProp(['four', 'three', 'two']);