Improve Modal component UX

iPurpl3x

I am sure I am not that only one who this scenario has occurred to:
You start filling some form in a modal window (could be the content of a page when using fof/pages) and then you accidentally close the modal by clicking outside of it, and all content is lost into Nirvana... This even happens when you select text in a textarea and trigger the "mouse-up" event outside of the modal.

So as this can be very frustrating, I would like to improve the UX and prevent this from happening.

Ideas on how to approach this are very welcome.

This will most certainly be something that can be fixed in core. But as for now all the instances are on beta.13 (and will stay there for a good while...) I will have to find a fix that can be done with an extension.

Maybe there should be a shouldClose() call in the close() method of ModalManager (or ModalManagerState in b14), and if it returns false interrupt the closing.

What do you think?

ctml

Yes please! Although the behaviour is of course not unique to flarum, it does make me curse to myself sometimes when this happens on any website with a modal with this behaviour. My blood pressure does drop to normal once I've got all my data entered again 😀

clarkwinkelmann

One "quick" and "global" fix could be to neutralize the backdrop click events completely, and just rely on the close button of the modal.

The mouseup outside of modal body I have encountered in other software before, but never in Flarum. Is there an extension I can reproduce that with? This is the related issue in bootstrap jquery which we use twbs/bootstrap13816 but I'd hope the version of bootstrap we currently use has the fix.

As for accidentally leaving a modal with unsubmitted data, Modal.prototype.hide should have been the perfect place to override that handling. Unfortunately because the backdrop is outside of the Modal component, the method isn't called when clicking the backdrop. Instead ModalState.prototype.close should be the place to handle it, but it might only have limited information about which modal is currently shown.

There's also the isDismissible static property of the Modal object, which was previously a method in beta 13 but can no longer exist without component instances.

While it would require a bit of refactoring, I would quite like the backdrop to be part of the Modal component itself, that way all of the modal+backdrop interaction could be handled within a single component without having to rely on even more state objects.

An alternative solution which I've started to use in some of my Mithril apps is to trigger DOM events manually. For example clicking on the backdrop could look for the close button of the modal and trigger a click on it. This works around the difficulties of handling parent/children component communication when all you want to do is extend a clickable area to outside a component.

iPurpl3x

clarkwinkelmann Thanks Clark for this extensive analysis of the issue. In the next days I will take some time a try to come up with a possible solution. I'll update you once I got something.

iPurpl3x

OK so I invested some time to investigate a little bit deeper.

I actually could not reproduce the problem I once had with the mouse-up thing that I described, so maybe it something old that has been fixed.

Now I understand what you mean with the backdrop @clarkwinkelmann... I think that this feature is needed because it simply makes the UI feel more natural when you can dismiss a modal by clicking outside of it.

I tried to find a way to prevent the backdrop click from closing the modal on a given condition but in the short time that I have invested I could not find any way to implement it, and as you said Clark, it may need some refactoring to get more control over the backdrop, as it now is fully managed by Bootstrap and that makes it rather difficult to address my issue here.