Dialog - backgroundClose: true - mouseup

[rmp1985]

Hello,

Some help please. I have a Dialog that opens everything correctly.

Using backgroundClose: true, I noticed an undesirable effect:

If I click INSIDE the Dialog, drag the mouse outside the Dialog and RELEASE the Dialog Closes.

It seems to me like something the library runs with mouseup. Would there be any adjustment to eliminate this action? In other words, if I click inside the dialog and drag and drop it outside of it, will it remain open? Ex: I have a name input and when trying to select the entire name it is easy to go outside the dialog which ends up closing it.

[rmp1985]

Detail: I just tested it and it works fine in Firefox. Do not close.

The closing is only happening in Chrome.

[Jenesius]

Hello! I checked the problem you described. True. The click is processed for the entire container. I will try to solve this problem as soon as possible.

If we go deeper into the problem, this happens because the 'click' event fires at the very end of the process (at the moment when you release the mouse button.) In this layout, the dark background is the parent of the modal window. This is what causes such an unpleasant effect. The first thing that came to mind was to process only pointerdown. I'll see how they do this in dialog in STANDART HTML and report the results.

[rmp1985]

Jenesius, thank you very much for your prompt service! I'm migrating vue2 to vue3 and I couldn't use vue-js-modal anymore. I believe that 50% of the dialogs migrated and now I noticed this bug.

From what I see, there's nothing I can do other than wait. I'm trying to analyze the library code to try to help with something. I hope you get a solution soon.

[Jenesius]

The one simple solution: replace click with pointerdown. I check the code of vue-js-modal, they also use this way to resolve this problem)

[Jenesius]

@rmp1985 Version 1.10.3.

[Jenesius]

A more elegant solution involves changing the project layout. Currently we have the following:

<div class = "modal-container">
  <div class = "modal">OUR MODAL COMPONENT</div>
</div>

Changing to

<div class = "modal-container">
  <div class = "modal-container-background></div>
  <div class = "modal">OUR MODAL COMPONENT</div>
</div>

I'll get to it this week, but it will take a little longer because... you will need to make sure that this does not in any way affect the functionality of the application. It seems to me that the problem will only be noticed with animation, because... For animation background will have to be written in a separate class.

[rmp1985]

Jenesius, thank you very much. I tested it on Chrome and Firefox and it works perfectly! Thanks for the speed!