From ab240347897e13936fffb333bdcb5ad977c599ff Mon Sep 17 00:00:00 2001
From: Mark Deutsch <mark.deutsch@duke.edu>
Date: Fri, 15 Nov 2019 12:28:08 -0500
Subject: [PATCH 1/3] TextField: Call onChange when cleared

---
 lib/TextField/TextField.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/TextField/TextField.js b/lib/TextField/TextField.js
index f687d502a..71f60a9bb 100644
--- a/lib/TextField/TextField.js
+++ b/lib/TextField/TextField.js
@@ -267,7 +267,7 @@ Use the "inputRef" prop instead to obtain a ref to the input.`);
   }
 
   clearField() {
-    const { onClearField } = this.props;
+    const { onChange, onClearField } = this.props;
 
     this.setState({ value: '' }, () => {
       // Fire callback
@@ -275,6 +275,11 @@ Use the "inputRef" prop instead to obtain a ref to the input.`);
         onClearField();
       }
 
+      // Fire callback
+      if (typeof onChange === 'function') {
+        onChange('');
+      }
+
       // Set focus on input again
       if (this.input.current) {
         this.input.current.focus();

From 0fb0fccb5d68cf2f280d81bdb817b1343aa56e0d Mon Sep 17 00:00:00 2001
From: Mark Deutsch <mark.deutsch@duke.edu>
Date: Mon, 18 Nov 2019 12:43:10 -0500
Subject: [PATCH 2/3] TextField: Pass event to onChange

---
 lib/TextField/TextField.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/TextField/TextField.js b/lib/TextField/TextField.js
index 71f60a9bb..1ebb84943 100644
--- a/lib/TextField/TextField.js
+++ b/lib/TextField/TextField.js
@@ -266,9 +266,11 @@ Use the "inputRef" prop instead to obtain a ref to the input.`);
     }
   }
 
-  clearField() {
+  clearField(event) {
     const { onChange, onClearField } = this.props;
 
+    event.persist();
+
     this.setState({ value: '' }, () => {
       // Fire callback
       if (typeof onClearField === 'function') {
@@ -277,7 +279,7 @@ Use the "inputRef" prop instead to obtain a ref to the input.`);
 
       // Fire callback
       if (typeof onChange === 'function') {
-        onChange('');
+        onChange(event);
       }
 
       // Set focus on input again

From 0f7afb70c1a98e0cf2b2135f8b2cdac7f8ae2410 Mon Sep 17 00:00:00 2001
From: Mark Deutsch <mark.deutsch@duke.edu>
Date: Tue, 19 Nov 2019 10:50:47 -0500
Subject: [PATCH 3/3] TextField: use native value setter when clearing

---
 lib/TextField/TextField.js | 32 ++++++++++++++------------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/lib/TextField/TextField.js b/lib/TextField/TextField.js
index 1ebb84943..db27ae7d1 100644
--- a/lib/TextField/TextField.js
+++ b/lib/TextField/TextField.js
@@ -266,27 +266,23 @@ Use the "inputRef" prop instead to obtain a ref to the input.`);
     }
   }
 
-  clearField(event) {
-    const { onChange, onClearField } = this.props;
+  clearField() {
+    const { onClearField } = this.props;
 
-    event.persist();
-
-    this.setState({ value: '' }, () => {
-      // Fire callback
-      if (typeof onClearField === 'function') {
-        onClearField();
-      }
+    // Fire callback
+    if (typeof onClearField === 'function') {
+      onClearField();
+    }
 
-      // Fire callback
-      if (typeof onChange === 'function') {
-        onChange(event);
-      }
+    // Clear value on input natively, dispatch an event to be picked up by handleChange, and focus on input again
+    if (this.input.current) {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+      nativeInputValueSetter.call(this.input.current, '');
 
-      // Set focus on input again
-      if (this.input.current) {
-        this.input.current.focus();
-      }
-    });
+      const ev = new Event('change', { bubbles: true });
+      this.input.current.dispatchEvent(ev);
+      this.input.current.focus();
+    }
   }
 
   handleChange(event) {