Ranges with allowCross=false result in wrong handle moving when dragging #226
Description
Couldn't think of a better title to this
I encountered a strange issue when attempting to implement a sort of wrapper component around the rc-slider.
When implementing an onChange containing a setState, the third value in the range slider is set to the same value as the second when dragging the first. The setState does not necessarily need to modify values used by the rc-slider for this to break.
For instance: A range of [20, 66, 70] becomes [21, 66, 66] when dragging the first handle. This also fails when dragging the last handle.
I tracked this to the "ensureValueNotConflict"-function in Range.js component on line 336. It is called in the componentWillReceiveProps, and this is why it breaks:
if (!allowCross && handle != null) {
if (handle > 0 && val <= bounds[handle - 1]) {
return bounds[handle - 1];
}
if (handle < bounds.length - 1 && val >= bounds[handle + 1]) {
return bounds[handle + 1];
}
}
A hacky fix I came up with is to pass the index to ensureValueNotConflict and then use that to skip values that aren't next to the dragged value
Range.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var _this2 = this;
if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
var bounds = this.state.bounds;
var value = nextProps.value || bounds;
var nextBounds = value.map(function (v, i) { <----- Index!
return _this2.trimAlignValue(v, i, nextProps);
});
And then modifying ensureValueNotConflict like this:
if (!allowCross && handle != null) {
if (handle - 1 != index && handle + 1 != index){
return val;
}
if (handle > 0 && val <= bounds[handle - 1]) {
return bounds[handle - 1];
}
if (handle < bounds.length - 1 && val >= bounds[handle + 1]) {
return bounds[handle + 1];
}
}
This seems to solve my issue