ElemeFE / ElemeFE/element

[Bug Report] Select内置的滚动条Bar的事件mouseup丢失问题

Open
#23,017 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Element UI version
2.15.14

### OS/Browsers version
Mac/131.0.6778.205

### Vue version
2.6.10

### Reproduction Link
https://codesandbox.io/p/sandbox/virtuallist-1-forked-kc7kql

### Steps to reproduce
任意一个select组件,出现滚动条。点击选中滚动条,鼠标移动,移除可操作范围。然后鼠标回到对应页面内,就会会触发Bar组件的mousemove事件,导致逻辑反复执行。

如果对应实例已经销毁,就会导致JS异常Cannot read properties of undefined (reading 'offsetHeight')

### What is Expected?
完善组件逻辑,增加mouseup事件丢失的降级方案
1、增加mouseleave事件,防止因操作移除操作区域导致mouseup事件丢失,mouseup的逻辑未执行,带来的非预期问题
2、增加逻辑,阻止浏览器触发drag事件,导致mouseup事件丢失

### What is actually happening?
对于Bar组件,当mouseup丢失后,会导致mousemove事件一直挂载在document,当鼠标回到文档哪,进而触发mousemove事件,引起非预期问题

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the linked CodeSandbox reproduction and inspect the Select component's Bar behavior around mousemove and mouseup handling. Reproduce the case where the pointer leaves the operating area, then returns to the page or the instance is destroyed; done means no lingering document mousemove handling or resulting offsetHeight exception.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.