Skip to content

Conversation

@osmianski
Copy link
Contributor

This PR allows a modal to prevent closure on Escape or on click away based on its state.

The idea is that before closing the modal, an event is dispatched, and the modal can handle it and, if needed, prevent closing the modal.

For example, if a modal has a isDirty property, it could have the following handler:

@script
<script>
    $wire.on('closingModalOnEscape', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
    $wire.on('closingModalOnClickAway', data => {
        if ($wire.isDirty && !confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog?') }}')) {
            data.closing = false;
        }
    });
</script>
@endscript

@osmianski
Copy link
Contributor Author

Hey @PhiloNL,

What is your opinion of this PR?

I created it fo fulfill a client requirement in a project, so I'm really interested that it's merged. If you see that it needs some changes, please let me know - I'm willing to make them. In a word, please let me know how I can be of help with this.

@PhiloNL
Copy link
Contributor

PhiloNL commented Oct 4, 2024

@osmianski thanks for the PR! Looks good :) If you could update the docs as well, that would be great 🙌

@osmianski
Copy link
Contributor Author

I updated the docs.

@PhiloNL PhiloNL merged commit 77ee949 into wire-elements:main Oct 7, 2024
@PhiloNL
Copy link
Contributor

PhiloNL commented Oct 7, 2024

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants