Close the modal when a user click outside the modal

[dayemsiddiqui]

Hi I have started using flux in my project, so far I really like, but I have noticed that the modal does not automatically close when a user clicks out side the modal, infact I looked at the modal example on the documentation site and the only way to close the modal is by clicking the close icon.

How can I configure the modal to automatically close when the click happens outside the modal

[hugoaf]

You could publish the modal and modify the flux/modal/index.blade.php to add the click event in the <ui-modal

<ui-modal {{ $attributes }} data-flux-modal x-on:click="$dispatch('modal-close', { name: '{{ $name }}' })">

Then wrap your modal content in a div where you add a click event with stop propagation.

<flux:modal>
    <div x-on:click="event.stopPropagation()" class="space-y-6">

[dayemsiddiqui]

hi good suggestion @hugoaf , however I hope there is a simpler way to do this out of the box, if I have write custom code for such a basic functionality it kind of defeats the purpose of using this library 😓

[patrykszady]

@dayemsiddiqui I agree. This was handled in alpine modal component

[trungpv1601]

Same +1

[joshhanley]

@dayemsiddiqui thanks for reporting! I have converted this issue to a feature request for now, so we can focus on fixing any bugs first.

[dayemsiddiqui]

Hmm @joshhanley this feels more like a bug to me than a new feature request, generally it is expected that a modal should close if clicked outside

[idealerror]

I think it's closer to a feature with the ability to turn that functionality on or off.

[mauricekindermann]

Definitely important - I have a large user base who are 50+ and low tech. Asking them to use a keyboard ESC key, or clicking a small X, is unfair.

I get that some modals should not be dismissable, but since these are by default, clicking the outside area is expected behavior.

I cannot imagine a scenario where you'd want a modal that can be dismissed, but not allow it to be dismissed this way.

Thanks team! :)

[booni3]

Same here. I would expect this to be default behaviour on both modals and flyouts, with the option to turn it off if required.

[dudelisius]

It is build on top of the browser dialog element if I'm not mistaken. This elements default behavior does not allow for closing the modal when clicking outside. So I would say this is expected behavior by default.

Although I think an option to easily disable this default behavior and allow for clicking outside the modal to close the it would be a nice addition.

[joffreypersia]

Popover and modal have different kind of behavior, it depends how Flux set up the stuff like manual or without manual that means the backdrop clicks close it automatically

[mauricekindermann]

I'm very surprised by you are right - the native element has this disabled by default. Strange as W3C have it as a known pattern:

attempts to interact with the inert content cause the dialog to close.

Regardless adding this as an option seems entirely reasonable, and the code is not complicated:

1. https://codepen.io/GeorgeGUS/pen/yLRvmyE
2. https://codepen.io/dvdvdmt/pen/BaavWbp

[leandrocfe]

Publish the modal and add x-on:click.self="$el.close()" to the dialog

php artisan flux:publish

<dialog
    x-on:click.self="$el.close()"
...

[mauricekindermann]

This is great thankyou. Hopefully we can get this added as an option built in.

[dayemsiddiqui]

@mauricekindermann @leandrocfe the problem with publishing views and changing it is that I am afraid in future updates of flux my code might break if those views are updated, I still strongly feel that this should be an expected behaviour and should be supported out of the box by flux

[mauricekindermann]

Yup agree, shouldn't need to publish views for this, I'm sure it will get added, way too reasonable and popular a request, and it should be straightforward to add.

[calebporzio]

This is one of those features I expect to be way more involved than it was. Here's what it took:

// Clicking outside the dialog should close it...
this.el.addEventListener('click', e => {
    if (e.target !== this.el) return

    if (clickHappenedOutside(this.el, e)) {
        this.hide()

        e.preventDefault(); e.stopPropagation()
    }
})

function clickHappenedOutside(el, event) {
    let rect = el.getBoundingClientRect()

    let x = event.clientX
    let y = event.clientY

    let isInside =
        x >= rect.left && x <= rect.right &&
        y >= rect.top  && y <= rect.bottom

    return ! isInside
}

This will ship in the next Flux release. Thanks for the input everyone!

[joffreypersia]

+1
some modals can have forms with a prevent loosing data, other can just be informative data

[danielrona]

👍 having a "force" flag to restore the current behavior would be nice.

[jeffchown]

+1 optional - or some way to choose/toggle

[ericjamesturner]

+1 optional

[calebporzio]

We added :dismissible="false" to make it optional. Thanks everyone.