From 13096f1b778ae8462f4d23daef9f0f5055bfc5db Mon Sep 17 00:00:00 2001
From: Thomas Ladd <thomas.rye.ladd@gmail.com>
Date: Wed, 26 Jun 2019 21:53:21 -0500
Subject: [PATCH]  Fix ESC key in examples (#15)

* Fix ESC key in examples

Pressing the ESC key clears the input and calls onChange with null. Some examples did not handle this case and crash as a result. https://github.com/downshift-js/downshift/issues/719

Update debounce-fn to fix gmail and axios examples

* Set debounce-fn to ^3.0.1
---
 package.json                                  | 2 +-
 src/ordered-examples/01-basic-autocomplete.js | 8 +++++++-
 src/other-examples/gmail/index.js             | 3 +--
 src/other-examples/prevent-reset-on-blur.js   | 9 +++++++--
 src/other-examples/using-actions.js           | 9 +++++++--
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index cfdf1a6..e136f00 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "apollo-boost": "0.1.10",
     "axios": "0.18.0",
-    "debounce-fn": "^1.0.0",
+    "debounce-fn": "^3.0.1",
     "downshift": "^3.1.8",
     "emotion": "^9.1.3",
     "feather-icons-react": "0.2.0",
diff --git a/src/ordered-examples/01-basic-autocomplete.js b/src/ordered-examples/01-basic-autocomplete.js
index 141ca44..a38ed26 100644
--- a/src/ordered-examples/01-basic-autocomplete.js
+++ b/src/ordered-examples/01-basic-autocomplete.js
@@ -12,7 +12,13 @@ const items = [
 
 export default () => (
   <Downshift
-    onChange={selection => alert(`You selected ${selection.value}`)}
+    onChange={selection => {
+      if (selection) {
+        alert(`You selected ${selection.value}`)
+      } else {
+        alert('selection cleared')
+      }
+    }}
     itemToString={item => (item ? item.value : '')}
   >
     {({
diff --git a/src/other-examples/gmail/index.js b/src/other-examples/gmail/index.js
index 19a7bed..b78b729 100644
--- a/src/other-examples/gmail/index.js
+++ b/src/other-examples/gmail/index.js
@@ -1,5 +1,4 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
+import React from 'react'
 import Downshift from 'downshift'
 import {List} from 'react-virtualized'
 import debounce from 'debounce-fn'
diff --git a/src/other-examples/prevent-reset-on-blur.js b/src/other-examples/prevent-reset-on-blur.js
index f7fc0c2..c65d7fe 100644
--- a/src/other-examples/prevent-reset-on-blur.js
+++ b/src/other-examples/prevent-reset-on-blur.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import {render} from 'react-dom'
 import Downshift from 'downshift'
 
 const items = [
@@ -19,7 +18,13 @@ function preventResetOnBlur(state, changes) {
 
 export default () => (
   <Downshift
-    onChange={selection => alert(`You selected ${selection.value}`)}
+    onChange={selection => {
+      if (selection) {
+        alert(`You selected ${selection.value}`)
+      } else {
+        alert('selection cleared')
+      }
+    }}
     stateReducer={preventResetOnBlur}
     itemToString={item => (item ? item.value : '')}
   >
diff --git a/src/other-examples/using-actions.js b/src/other-examples/using-actions.js
index 441fc17..c39251f 100644
--- a/src/other-examples/using-actions.js
+++ b/src/other-examples/using-actions.js
@@ -14,7 +14,6 @@
 //   }
 // }
 import React from 'react'
-import {render} from 'react-dom'
 import Downshift from 'downshift'
 
 const items = [
@@ -27,7 +26,13 @@ const items = [
 
 export default () => (
   <Downshift
-    onChange={selection => alert(`You selected ${selection.value}`)}
+    onChange={selection => {
+      if (selection) {
+        alert(`You selected ${selection.value}`)
+      } else {
+        alert('selection cleared')
+      }
+    }}
     itemToString={item => (item ? item.value : '')}
   >
     {({