[Bug Report] 【el-dialog】close bug

[W-Ace]

Element UI version

2.7.2

OS/Browsers version

chrome

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/cx56bm1y/

Steps to reproduce

I have a dialog, I want to close it by click-modal

but if I mousedown on the dialog and mouseup on the modal, it also closed!! I don't want that

because sometimes I select text in the input will out of bounds, and dialog be closed

What is Expected?

I just want to close it by click-modal only

but after I set close-on-click-modal to false

both of them are invalid, I want to reserve click event

thanks everyone

What is actually happening?

Dialog close issue

[YuLinXi]

I have the same problem, It is currently positioned as the latest version of the Google browser（73.0.3683.86）

[danielktaylor]

Definitely a change in Google Chrome - lots of sites are broken now in the same way.

Might be related to this? https://bugs.chromium.org/p/chromium/issues/detail?id=941910

[ansonhorse]

I don't think this problem only in Google Chrome.
I've tested in Safari and Firefox, also have this issue!

[ds009]

Same issue here, it seems like every mouseup event triggers an event click, who calls handleWrapperClick, cause div.el-dialog__wrapper is a parent node of div.el-dialog, but not a sibling node.

The "wrapper" should not handle the click close event, there should be a backdrop node which just fill the background and close the dialog when being clicked

[xiaogaofudao]

遇到同样问题，当点击dialog 内部，鼠标滑动到 dialog 外部时松开鼠标，dialog 会关闭。这是个bug

i have the same problem, when you click inside the dialog and the mouse slides outside the dialog, then you release the mouse and the dialog will close. This is a bug.

[hkwin]

遇到同样问题，当点击dialog 内部，鼠标滑动到 dialog 外部时松开鼠标，dialog 会关闭。这是个bug

i have the same problem, when you click inside the dialog and the mouse slides outside the dialog, then you release the mouse and the dialog will close. This is a bug.

[hkwin]

How to avoid this ? Thanks

[luckyCao]

@W-Lynn @YuLinXi @danielktaylor @hkwin i am curious, what's the scenarios，why click inside the dialog then slides outside the dialog ？

[ansonhorse]

@W-Lynn @YuLinXi @danielktaylor @hkwin i am curious, what's the scenarios，why click inside the dialog then slides outside the dialog ？

Let me explain this with a gif which is more specific than I type the words.
Just a normal selection with the mouse, no any other actions.

[ansonhorse]

how can we solve this issue ,is there a temporary solution ?

Actually I don't expect the el team has willings to fix this problem.
It may be not a problem for them I guess, as you can see this problem can be seen in the early version: 1.4, and last to the latest version(2.9.1)!
So, set the close-on-click-modal to false, or just remind your users to make their hands steady😂!

[W-Ace]

@luckyCao, likes comment by @ansonhorse
when I want to select text for copy, sometimes will out of bounds
(some people did not want to input password twice for confirm....)
I feel the User Experience is not good
because the question be found by client
Thank you for solved it~

[yangchaojiang]

遇到同样问题，当点击dialog 内部，鼠标滑动到 dialog 外部时松开鼠标，dialog 会关闭。这是个bug

这个有解决方案吗

[gomaa0]

Looks that this issue is still on?

[zpoll92]

Can you please fix this bug ASAP? It's very annoying!!!

[zpoll92]

Why did you revert the bug fix when it work well?

[zpoll92]

Why are you reverting the fix? It would be working. Please fix this asap. Lots of people have this problem.

[liub1934]

该bug到现在还没修复。。。
可以临时参考该教程修改下https://liubing.me/fix-element-ui-dialog-close-bug.html