ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

[Bug Report] Marking text in el-input closes dialog #17544

Open steffanhalv opened 5 years ago

steffanhalv commented 5 years ago

Element UI version

2.1.0

OS/Browsers version

Latest chrome, ff, ie, edge, safari, electron, cordova etc.

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/fw6gx75s/

Steps to reproduce

In input field inside of dialog, select text fast from right to left with mouse will close dialog.

What is Expected?

Input field should be selected. It should be an option to disable 'close on swipe'. This function should also only be a touch event & not a mouse event.

What is actually happening?

Dialog closes.

ghost commented 5 years ago

You sweep too fast, causing the mouse to move outside the bomb box, you can set the bomb box can only be triggered manually to close! ___

steffanhalv commented 5 years ago

Ah I see. The problem is not that it closes on swipe, but that the mouse up event is fired outside of the dialog which closes the box. Can't just the click outside of dialog event be triggered on mouse down instead of mouse up?

It will fix this problem and should not have any bad effects I think.

buremba commented 4 years ago

We realized that almost 20% of our users run into this issue in production. It affects the user experience in a negative way. :(

As @steffanhalv mentioned, changing the event to mousedown would solve the problem. Is there any workaround or can we just make it configurable via el-dialog props?

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ashishgehlot commented 2 years ago

Any fix or workaround ?