fix(#19879): focusing the wrong handle when using range (#621)

* fix(#19879): focusing the wrong handle when using range

* chore(allowCross): add test case where allowCross is true

Author: kerm1it

assets/index.less

@@ -59,9 +59,12 @@
     background-color: #fff;
     touch-action: pan-x;
 
-    &:focus {
+    &-dragging&-dragging&-dragging {
       border-color: tint(@primary-color, 20%);
       box-shadow: 0 0 0 5px tint(@primary-color, 50%);
+    }
+
+    &:focus {
       outline: none;
     }
 

src/Range.jsx

@@ -411,16 +411,18 @@ class Range extends React.Component {
       if (disabled || tabIndex[i] === null) {
           _tabIndex = null;
       }
+      const dragging = handle === i;
       return handleGenerator({
         className: classNames({
           [handleClassName]: true,
           [`${handleClassName}-${i + 1}`]: true,
+          [`${handleClassName}-dragging`]: dragging,
         }),
         prefixCls,
         vertical,
+        dragging,
         offset: offsets[i],
         value: v,
-        dragging: handle === i,
         index: i,
         tabIndex: _tabIndex,
         min,

tests/Range.test.js

@@ -183,6 +183,53 @@ describe('Range', () => {
     expect(wrapper.instance().getSlider().state.bounds[1]).toBe(40);
   });
 
+  it('should render correctly when allowCross', () => {
+    class CustomizedRange extends React.Component { // eslint-disable-line
+      constructor(props) {
+        super(props);
+        this.state = {
+          value: [20, 40],
+        };
+      }
+      onChange = (value) => {
+        this.setState({
+          value,
+        });
+      }
+      getSlider() {
+        return this.refs.slider;
+      }
+      render() {
+        return <Range ref="slider" onChange={this.onChange} value={this.state.value} />;
+      }
+    }
+    const map = {};
+    document.addEventListener = jest.fn().mockImplementation((event, cb) => {
+      map[event] = cb;
+    });
+
+    const mockRect = (wrapper) => {
+      wrapper.instance().getSlider().sliderRef.getBoundingClientRect = () => ({
+        left: 0,
+        width: 100,
+      });
+    };
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const wrapper = mount(<CustomizedRange />, { attachTo: container });
+    mockRect(wrapper);
+
+    expect(wrapper.instance().getSlider().state.bounds).toEqual([20, 40]);
+
+    wrapper.find('.rc-slider').simulate('mouseDown', { button: 0, pageX: 0, pageY: 0 });
+    map.mousemove({ type: 'mousemove', pageX: 60, pageY: 0 });
+
+    expect(wrapper.instance().getSlider().state.bounds).toEqual([40, 60]);
+    expect(wrapper.find('.rc-slider-handle-2').at(1).getDOMNode().className).toContain('rc-slider-handle-dragging');
+  });
+
   it('should keep pushable with pushable s defalutValue when not allowCross and setState', () => {
     class CustomizedRange extends React.Component { // eslint-disable-line
       state = {