Modal closes unexpectedly when click and drag the modal window with the mouse

[kdahlquist]

I found this with the generate network modal, but it might be a problem with other modals. If I click and drag on the modal window, as if to move it, the window actually closes.

[dondi]

Specifically, if the drag ends outside of the modal, it closes. Closing the modal should be restricted to just clicking the “X” button

[ntran18]

I'm not sure is this bug because of dragging or you just click anywhere outside of the modal window. It automatically closes the window if you click anywhere in the website.

[dondi]

I believe the modal code isn’t written by us; instead it’s a library that automatically helps with vanilla web modals. Let’s try to track down that library (which means tracking down the code that opens the modal) then we can look to see if that library has any settings that will help us revise/customize the behavior

[ntran18]

I searched on this one. We are using modal library of Bootstrap. There is no change in css, and the default of Bootstrap doesn't have this feature. My hypothesis for this is because we have older version of Bootstrap, so it might be one of their bugs. The current version of Bootstrap in GRNsight is 2.3.2, while Bootstrap newest version is 5.

[dondi]

This is a possibility but embarking on this may take notable effort due to the distance between versions

@ntran18 can first do a minimal Bootstrap 5 web app that opens a modal to verify if the new modals have the behavior that we want (or can be configured to do so). If we verify that this works, then we can consider the prospect of an update

Before jumping into an upgrade, we can also explore the effort involved in manually revising the modal behavior. Maybe there’s an event handler that we can override or other code that specifically adjusts this?

[ntran18]

I didn't have time to do the website, but I found some examples. https://www.w3schools.com/bootstrap5/bootstrap_modal.php --> this is bootstrap 5 https://codepen.io/heldonchan/pen/OdJxaB --> this is bootstrap 2.3.2

I didn't see the problem in bootstrap 2. So currently, I don't know what the problem with the website

[dondi]

Thanks to these examples from @ntran18 we are able to isolate that the hold-and-drag-outside movement is specific to GRNsight and not a default behavior of either version of Bootstrap. Because of this, it’s looking likely that the behavior is due to some customization that we did in our own code, and therefore may be fixable without resorting to doing a big update to Bootstrap

[kdahlquist]

Fixed in beta 7.0.3. Need to make this fix for other modals.

[dondi]

We can close after the change is propagated to all other modals

[kdahlquist]

Verified that this works now for the Errors, Warnings, and Export to Excel modals in Beta 7.0.4