Merge pull request #3607 from kumarharsh/fix/debounce-leak

fix(knobs): cancel debounced onChange on unmounting
storybookjs · May 19, 2018 · b414338 · b414338
2 parents b9c7c34 + e188459
commit b414338
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;