diff --git a/ui/src/shared/components/OptIn.js b/ui/src/shared/components/OptIn.js index fc2161e7d1..b38f643bfb 100644 --- a/ui/src/shared/components/OptIn.js +++ b/ui/src/shared/components/OptIn.js @@ -18,6 +18,9 @@ class OptIn extends Component { customValue, toggleClicked: false, customValueInputBlurred: false, + resetTimeoutID: null, + toggleTimeoutID: null, + blurTimeoutID: null, } this.useFixedValue = ::this.useFixedValue @@ -33,6 +36,12 @@ class OptIn extends Component { this.setValue = ::this.setValue } + componentWillUnmount() { + clearTimeout(this.state.resetTimeoutID) + clearTimeout(this.state.toggleTimeoutID) + clearTimeout(this.state.blurTimeoutID) + } + useFixedValue() { this.setState({useCustomValue: false}, this.setValue) } @@ -66,9 +75,11 @@ class OptIn extends Component { this.toggleValue() }) - setTimeout(() => { + const toggleTimeoutID = setTimeout(() => { this.setState({toggleClicked: false}) }, TOGGLE_CLICKED_TIMEOUT) + + this.setState({toggleTimeoutID}) } } @@ -82,11 +93,13 @@ class OptIn extends Component { {customValueInputBlurred: true, customValue: e.target.value.trim()}, () => { if (this.state.customValue === '') { - setTimeout(() => { + const blurTimeoutID = setTimeout(() => { if (!this.state.toggleClicked) { this.useFixedValue() } }, BLUR_FOCUS_GAP_TIMEOUT) + + this.setState({blurTimeoutID}) } } ) @@ -122,9 +135,11 @@ class OptIn extends Component { } // reset UI interaction state-tracking values & prevent blur + click - setTimeout(() => { + const resetTimeoutID = setTimeout(() => { this.setState({toggleClicked: false, customValueInputBlurred: false}) }, RESET_TIMEOUT) + + this.setState({resetTimeoutID}) } render() {