From e1884594d0d466e8b0fdbd771faf1afd0e013672 Mon Sep 17 00:00:00 2001
From: Kumar Harsh <khs@playlyfe.com>
Date: Sat, 19 May 2018 02:59:47 +0530
Subject: [PATCH] fix(knobs): cancel debounced onChange on unmounting

---
 addons/knobs/src/components/types/Array.js  | 4 ++++
 addons/knobs/src/components/types/Color.js  | 1 +
 addons/knobs/src/components/types/Number.js | 4 ++++
 addons/knobs/src/components/types/Object.js | 4 ++++
 addons/knobs/src/components/types/Text.js   | 4 ++++
 5 files changed, 17 insertions(+)

diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js
index 087ec9bd5c4b..a44f71532be9 100644
--- a/addons/knobs/src/components/types/Array.js
+++ b/addons/knobs/src/components/types/Array.js
@@ -36,6 +36,10 @@ class ArrayType extends React.Component {
     this.onChange = debounce(this.props.onChange, 200);
   }
 
+  componentWillUnmount() {
+    this.onChange.cancel();
+  }
+
   handleChange = e => {
     const { knob } = this.props;
     const { value } = e.target;
diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
index d11aed8f7174..b11982a8d722 100644
--- a/addons/knobs/src/components/types/Color.js
+++ b/addons/knobs/src/components/types/Color.js
@@ -46,6 +46,7 @@ class ColorType extends React.Component {
   }
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleWindowMouseDown);
+    this.onChange.cancel();
   }
 
   handleWindowMouseDown = e => {
diff --git a/addons/knobs/src/components/types/Number.js b/addons/knobs/src/components/types/Number.js
index f0d6c4e630cd..5413c612a17b 100644
--- a/addons/knobs/src/components/types/Number.js
+++ b/addons/knobs/src/components/types/Number.js
@@ -45,6 +45,10 @@ class NumberType extends React.Component {
     this.onChange = debounce(props.onChange, 400);
   }
 
+  componentWillUnmount() {
+    this.onChange.cancel();
+  }
+
   handleChange = event => {
     const { value } = event.target;
 
diff --git a/addons/knobs/src/components/types/Object.js b/addons/knobs/src/components/types/Object.js
index 94b72d372f3b..083943c6e1c2 100644
--- a/addons/knobs/src/components/types/Object.js
+++ b/addons/knobs/src/components/types/Object.js
@@ -37,6 +37,10 @@ class ObjectType extends React.Component {
     this.onChange = debounce(props.onChange, 200);
   }
 
+  componentWillUnmount() {
+    this.onChange.cancel();
+  }
+
   handleChange = e => {
     const { value } = e.target;
 
diff --git a/addons/knobs/src/components/types/Text.js b/addons/knobs/src/components/types/Text.js
index c7b67189b104..e353b319e8ab 100644
--- a/addons/knobs/src/components/types/Text.js
+++ b/addons/knobs/src/components/types/Text.js
@@ -28,6 +28,10 @@ class TextType extends React.Component {
     this.onChange = debounce(props.onChange, 200);
   }
 
+  componentWillUnmount() {
+    this.onChange.cancel();
+  }
+
   handleChange = event => {
     const { value } = event.target;