Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Form内的Slider滑动时,会导致页面其他文本元素选中,下次调整滑块时,事件卡手 #2585

Open
1 task done
shaoerkuai opened this issue Nov 23, 2024 · 0 comments

Comments

@shaoerkuai
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

Slider

Semi Version

2.69.2

Current Behavior

No response

Expected Behavior

Slider滑动时,会导致页面其他元素选中,下次调整滑块时,事件卡手

Steps To Reproduce

1.新建一个Form,里面加个Slider

ReproducibleCode

const handleChangeStart = () => {
        document.body.style.userSelect = "none";
    };

    const handleChangeEnd = () => {
        document.body.style.userSelect = "";
    };
                    <Form.Slider label='成功率范围' labelPosition='left' field='range'
                                 defaultValue={[20, 60]}
                                 range className={css`
                    width: 300px`}
                                 onChange={handleChangeStart}
                                 onMouseUp={handleChangeEnd}
                    ></Form.Slider>

Environment

- OS:Windows 11
- browser: Edge 131

Anything else?

解决方法目前我是onChange和onMouseUp两个事件,分别设置document.body.style.userSelect和还原,防止页面其他文本被选中,导致用户二次调节slider时出现事件异常,虽然说目前是没什么问题了,但是代码多出这两个感觉怪怪的,也不是特别好的处理思路。

而且,官网的Slider不能复现,但是https://semi.design/zh-CN/input/form可以复现,表现就是用户鼠标拖动不稳时,到了外面,再回来,事件会被卡住:
1.放开鼠标后,slider仍然能跟着鼠标走,要么就是
2.直接被禁止拖动,再点下鼠标,再去拖,可以恢复
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant