From 107e2bbd83fb5823ea803714d6c2262ec28f41ae Mon Sep 17 00:00:00 2001 From: Nick Dancer Date: Thu, 17 Nov 2022 12:14:02 +1000 Subject: [PATCH 1/2] fix: prevent snap back issue on mobile If `preventDefault` isn't called touch event propogates through to mouse event and `onSliderMouseDown` is called. This in turn calls `forceValueFromPosition` which can regularly cause thumb to snap back at the end of touch event. --- src/components/ReactSlider/ReactSlider.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx index de9dd21..6a8fdda 100644 --- a/src/components/ReactSlider/ReactSlider.jsx +++ b/src/components/ReactSlider/ReactSlider.jsx @@ -433,7 +433,8 @@ class ReactSlider extends React.Component { this.onEnd(this.getMouseEventMap()); }; - onTouchEnd = () => { + onTouchEnd = e => { + e.preventDefault(); this.onEnd(this.getTouchEventMap()); }; From 6ca5853341022cfc85e0e114ad893582f29dfb97 Mon Sep 17 00:00:00 2001 From: Nick Dancer Date: Thu, 17 Nov 2022 12:15:53 +1000 Subject: [PATCH 2/2] refactor: avoid manipulating state directly --- src/components/ReactSlider/ReactSlider.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx index 6a8fdda..7f548a6 100644 --- a/src/components/ReactSlider/ReactSlider.jsx +++ b/src/components/ReactSlider/ReactSlider.jsx @@ -836,7 +836,10 @@ class ReactSlider extends React.Component { } move(newValue) { - const { index, value } = this.state; + // Clone this.state.value since we'll modify it temporarily + // eslint-disable-next-line zillow/react/no-access-state-in-setstate + const value = this.state.value.slice(); + const { index } = this.state; const { length } = value; // Short circuit if the value is not changing