From db942a6a3fb6627ddd88ab754a4187e430f9b8df Mon Sep 17 00:00:00 2001
From: wbrgss <williamb@plot.ly>
Date: Wed, 12 Jun 2019 14:51:10 -0400
Subject: [PATCH] Add DashSlider conditional in componentWillReceiveProps

---
 src/components/RangeSlider.react.js | 16 +++++++++++-----
 src/components/Slider.react.js      | 18 +++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js
index 23350e13a..629809152 100644
--- a/src/components/RangeSlider.react.js
+++ b/src/components/RangeSlider.react.js
@@ -11,6 +11,9 @@ export default class RangeSlider extends Component {
     constructor(props) {
         super(props);
         this.propsToState = this.propsToState.bind(this);
+        this.DashSlider = props.tooltip
+            ? createSliderWithTooltip(Range)
+            : Range;
     }
 
     propsToState(newProps) {
@@ -18,6 +21,11 @@ export default class RangeSlider extends Component {
     }
 
     componentWillReceiveProps(newProps) {
+        if (newProps.tooltip !== this.props.tooltip) {
+            this.DashSlider = newProps.tooltip
+                ? createSliderWithTooltip(Range)
+                : Range;
+        }
         this.propsToState(newProps);
     }
 
@@ -37,8 +45,6 @@ export default class RangeSlider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        const DashSlider = tooltip ? createSliderWithTooltip(Range) : Range;
-
         let tipProps;
         if (tooltip && tooltip.always_visible) {
             /**
@@ -47,8 +53,8 @@ export default class RangeSlider extends Component {
              * assigns the new (renamed) key to the old key and deletes the old key
              */
             tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible
-            })
+                visible: tooltip.always_visible,
+            });
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;
@@ -63,7 +69,7 @@ export default class RangeSlider extends Component {
                 className={className}
                 style={vertical ? {height: '100%'} : {}}
             >
-                <DashSlider
+                <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
                             setProps({value});
diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js
index c9d47d050..760740cdc 100644
--- a/src/components/Slider.react.js
+++ b/src/components/Slider.react.js
@@ -11,6 +11,9 @@ export default class Slider extends Component {
     constructor(props) {
         super(props);
         this.propsToState = this.propsToState.bind(this);
+        this.DashSlider = props.tooltip
+            ? createSliderWithTooltip(ReactSlider)
+            : ReactSlider;
     }
 
     propsToState(newProps) {
@@ -18,6 +21,11 @@ export default class Slider extends Component {
     }
 
     componentWillReceiveProps(newProps) {
+        if (newProps.tooltip !== this.props.tooltip) {
+            this.DashSlider = newProps.tooltip
+                ? createSliderWithTooltip(ReactSlider)
+                : ReactSlider;
+        }
         this.propsToState(newProps);
     }
 
@@ -37,10 +45,6 @@ export default class Slider extends Component {
         } = this.props;
         const value = this.state.value;
 
-        const DashSlider = tooltip
-            ? createSliderWithTooltip(ReactSlider)
-            : ReactSlider;
-
         let tipProps;
         if (tooltip && tooltip.always_visible) {
             /**
@@ -49,8 +53,8 @@ export default class Slider extends Component {
              * assigns the new (renamed) key to the old key and deletes the old key
              */
             tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible
-            })
+                visible: tooltip.always_visible,
+            });
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;
@@ -65,7 +69,7 @@ export default class Slider extends Component {
                 className={className}
                 style={vertical ? {height: '100%'} : {}}
             >
-                <DashSlider
+                <this.DashSlider
                     onChange={value => {
                         if (updatemode === 'drag') {
                             setProps({value});