react-component / react-component/slider

当Slider宽度超过外层容器时,点击Slider,滚动条位置异常

Open
#1,060 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.1k
Forks
768
Avg merge
11d 22h
Merged PRs (30d)
5

Description

复现步骤:

  1. 打开官方demo链接:https://slider-react-component.vercel.app/demo/debug
  2. 修改demo代码为:
import Slider from 'rc-slider';
import React from 'react';
import '../../assets/index.less';

export default () => {
  const [disabled, setDisabled] = React.useState(false);
  const [range, setRange] = React.useState(false);
  const [reverse, setReverse] = React.useState(false);
  const [vertical, setVertical] = React.useState(false);

  return (
    <div style={{ transform: 'scale(1.5)', transformOrigin: 'top left' }}>
      <div>
        <label>
          <input type="checkbox" checked={disabled} onChange={() => setDisabled(!disabled)} />
          Disabled
        </label>
        <label>
          <input type="checkbox" checked={range} onChange={() => setRange(!range)} />
          Range
        </label>
        <label>
          <input type="checkbox" checked={reverse} onChange={() => setReverse(!reverse)} />
          Reverse
        </label>
        <label>
          <input type="checkbox" checked={vertical} onChange={() => setVertical(!vertical)} />
          Vertical
        </label>
      </div>

      <div style={{ height: 300, width: 600 }}>
        <Slider
          onChange={(nextValues) => {
            console.log('Change:', nextValues);
          }}
          onChangeComplete={(v) => {
            console.log('AfterChange:', v);
          }}
          min={0}
          max={1}
          defaultValue={0.81}
          step={0.01}
        />
      </div>
    </div>
  );
};
  1. 代码块外有滚动条,点击slider,滚动条位置异常
  2. 分析到原因:因为在点击组件时,调用了滑块的focus事件导致

https://github.com/user-attachments/assets/24fca38a-eea0-4012-88f9-397ee18ecc00

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the official demo at slider-react-component.vercel.app/demo/debug using the provided scaled container and Slider configuration. Start by inspecting the handle focus behavior triggered on click; done means clicking the slider no longer moves the surrounding page scrollbar unexpectedly while normal slider interaction remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.