react-component / react-component/slider
当Slider宽度超过外层容器时,点击Slider,滚动条位置异常
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
复现步骤:
- 打开官方demo链接:https://slider-react-component.vercel.app/demo/debug
- 修改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>
);
};
- 代码块外有滚动条,点击slider,滚动条位置异常
- 分析到原因:因为在点击组件时,调用了滑块的focus事件导致
https://github.com/user-attachments/assets/24fca38a-eea0-4012-88f9-397ee18ecc00
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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