From 76c7efc2afbc28e5fd58c357e19503902a33cc83 Mon Sep 17 00:00:00 2001
From: Benjamin Pirotte <benjamin.pirotte@collibra.com>
Date: Tue, 24 Apr 2018 14:58:00 +0200
Subject: [PATCH] Fix creating  new option on key down on unexpected keys

---
 README.md              |  2 +-
 src/Creatable.js       | 12 ++++++------
 test/Creatable-test.js | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index a519ec44ca..95dc24361b 100644
--- a/README.md
+++ b/README.md
@@ -455,7 +455,7 @@ function onInputKeyDown(event) {
 | `isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` |
 | `newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` |
 | `onNewOptionClick` | function | new option click handler, it calls when new option has been selected. `function(option) {}` |
-| `shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `({ keyCode: number }): boolean` |
+| `shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `(event): boolean` |
 | `promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` |
 
 ### Methods
diff --git a/src/Creatable.js b/src/Creatable.js
index ec1fc44163..8f12020efa 100644
--- a/src/Creatable.js
+++ b/src/Creatable.js
@@ -129,7 +129,7 @@ class CreatableSelect extends React.Component {
 		if (
 			focusedOption &&
 			focusedOption === this._createPlaceholderOption &&
-			shouldKeyDownEventCreateNewOption({ keyCode: event.keyCode })
+			shouldKeyDownEventCreateNewOption(event)
 		) {
 			this.createNewOption();
 
@@ -220,11 +220,11 @@ const newOptionCreator = ({ label, labelKey, valueKey }) => {
 
 const promptTextCreator = label => `Create option "${label}"`;
 
-const shouldKeyDownEventCreateNewOption = ({ keyCode }) => {
-	switch (keyCode) {
-		case 9:   // TAB
-		case 13:  // ENTER
-		case 188: // COMMA
+const shouldKeyDownEventCreateNewOption = ({ key }) => {
+	switch (key) {
+		case 'Tab':
+		case 'Enter':
+		case ',':
 			return true;
 		default:
 			return false;
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index 488eb1f78f..4a2ef61fb1 100644
--- a/test/Creatable-test.js
+++ b/test/Creatable-test.js
@@ -282,14 +282,14 @@ describe('Creatable', () => {
 	});
 
 	it('default :shouldKeyDownEventCreateNewOption function should accept TAB, ENTER, and comma keys', () => {
-		function test (keyCode) {
-			return Select.Creatable.shouldKeyDownEventCreateNewOption({ keyCode });
+		function test (key) {
+			return Select.Creatable.shouldKeyDownEventCreateNewOption({ key });
 		};
 
-		expect(test(9), 'to be', true);
-		expect(test(13), 'to be', true);
-		expect(test(188), 'to be', true);
-		expect(test(1), 'to be', false);
+		expect(test('Tab'), 'to be', true);
+		expect(test('Enter'), 'to be', true);
+		expect(test(','), 'to be', true);
+		expect(test('a'), 'to be', false);
 	});
 
 	it('default :onInputKeyDown should run user provided handler.', (done) => {