fix: prevent track focus from scrolling

src/Handles/index.tsx

@@ -26,7 +26,7 @@ export interface HandlesProps {
 }
 
 export interface HandlesRef {
-  focus: (index: number) => void;
+  focus: (index: number, options?: FocusOptions) => void;
   hideHelp: VoidFunction;
 }
 
@@ -66,8 +66,12 @@ const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
 
   // =========================== Render ===========================
   React.useImperativeHandle(ref, () => ({
-    focus: (index: number) => {
-      handlesRef.current[index]?.focus();
+    focus: (index: number, options?: FocusOptions) => {
+      if (options) {
+        handlesRef.current[index]?.focus(options);
+      } else {
+        handlesRef.current[index]?.focus();
+      }
     },
     hideHelp: () => {
       flushSync(() => {

src/Slider.tsx

@@ -415,7 +415,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
       if (e) {
         (document.activeElement as HTMLElement)?.blur?.();
-        handlesRef.current!.focus(focusIndex);
+        handlesRef.current!.focus(focusIndex, { preventScroll: true });
         onStartDrag(e, focusIndex, cloneNextValues);
       } else {
         // https://github.com/ant-design/ant-design/issues/49997

tests/Slider.test.js

@@ -33,6 +33,17 @@ describe('Slider', () => {
     });
   });
 
+  it('does not scroll the page when focusing a handle from a track press', () => {
+    const { container } = render(<Slider defaultValue={25} />);
+    const slider = container.querySelector('.rc-slider');
+    const handle = container.querySelector('.rc-slider-handle');
+    const focus = jest.spyOn(handle, 'focus');
+
+    fireEvent.mouseDown(slider, { clientX: 50, clientY: 0 });
+
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+  });
+
   it('should render Slider correctly where value > startPoint', () => {
     const { container } = render(<Slider value={50} startPoint={20} />);
     expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveStyle({ left: '50%' });