behavior when clicking outside a modal

[nbittich]

instead of:

<div {{on "click" this.closeModal}} class="au-c-modal-backdrop {{if @modalOpen "is-visible"}}"  role="button"></div>

It would be nice if we could change that behavior like e.g :

{{#unless this.keepModalOpenOnClickOutside}} 
   <div {{on "click" this.closeModal}} class="au-c-modal-backdrop {{if @modalOpen "is-visible"}}"  role="button"></div>
{{else}}
    <div class="au-c-modal-backdrop {{if @modalOpen "is-visible"}}"></div>
{{/unless}}

[Windvis]

What's the use-case for this? Why do you want to keep the modal open in that scenario?

[nbittich]

@Windvis when user accidentally clicks outside the modal, modal is closed which is annoying. Feedback from the testers.

[Windvis]

@Dietr just double checking. Is disabling the backdrop clicking ok from a UX perspective?

I think it raises some more questions:

• Does that mean we also want to allow disabling pressing escape to close the modal?
• Should it also be possible to hide the close icon?

I fear that it might be weird for users that some modals in a project allow it while others in the project don't but maybe that's something that should be user tested.

Maybe this is a case where a modal wasn't the right pattern and using a different setup might be better?

[Dietr]

I'm not a fan of disabling escape or disabling the close when you click on the background for consistency reasons. A modal has a certain behavour that should be as expected. We could decide to remove the background click for all modals though. I'll do some research about the best practice for that.

I think that a non-closable dialog or prompt window for accept/decline actions could also be useful but maybe better to create a new component for this? (see for example: https://www.lightningdesignsystem.com/components/prompt/)

[nbittich]

in bootstrap, static backdrop seems to be a thing: https://getbootstrap.com/docs/5.2/components/modal/#static-backdrop

[Dietr]

Did some more research on this. We should differentiate between a modal and a dialog/prompt component.

• modal: user has full control, is closable with a button and close icon, escape and outside click closes the modal, has different sizing options and can contain more complex UI inside.
• prompt/dialog: not closable, action is required. One size with minimal UI inside the content.

We can easily create a prompt component based on the modal.

Regarding the click-outside issue. If user-testing confirms that this is a common issue in our products we can remove this on all modals.

[Windvis]

I think this was resolved by #411