Cancel event on modal

[sertxudev]

Flux version

Any

Livewire version

Any

Tailwind version

Any

Browser and Operating System

Any

What is the problem?

On the modal docs page, it's explained how to capture the cancel event to perform some action.

https://fluxui.dev/components/modal#cancel-events

But there’s no explanation about how to emit it. Do we have to use $dispatch(’cancel’)?

The $flux.modal() and Flux::modal() methods only support show and close, but no cancel.

In the documentation, the Cancel button is surrounded by the flux:modal.close element, which dispatches the close event:

<flux:modal.close>
    <flux:button variant="ghost">Cancel</flux:button>
</flux:modal.close>

Maybe there should be a flux:model.cancel element?

Code snippets to replicate the problem

The "someLivewireAction" will never be run.

<flux:modal.trigger name="delete-profile">
    <flux:button variant="danger">Delete</flux:button>
</flux:modal.trigger>

<flux:modal name="delete-profile" class="min-w-[22rem]" @cancel="someLivewireAction">
    <div class="space-y-6">
        <div>
            <flux:heading size="lg">Delete project?</flux:heading>

            <flux:text class="mt-2">
                You're about to delete this project.<br>
                This action cannot be reversed.
            </flux:text>
        </div>

        <div class="flex gap-2">
            <flux:spacer />

            <flux:modal.close>
                <flux:button variant="ghost">Cancel</flux:button>
            </flux:modal.close>

            <flux:button type="submit" variant="danger">Delete project</flux:button>
        </div>
    </div>
</flux:modal>

Screenshots/ screen recordings of the problem

N/A

How do you expect it to work?

The documentation needs to indicate how to dispatch the cancel event at:

https://fluxui.dev/components/modal#cancel-events

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@sertxudev The cancel event only gets dispatched if the user presses the Esc key or clicks outside the modal (the close event also dispatches in these cases).

In docs: https://fluxui.dev/components/modal#fluxmodal under Prop cancel.

You can use this component to test different modal 'exits' (make sure you refresh your browser between each usage):

<?php

use Livewire\Component;

new class extends Component
{
    public string $wasClosed = 'false';

    public string $wasCancelled = 'false';

    public function modalClosed(): void
    {
        $this->wasClosed = 'true';
    }

    public function modalCancelled(): void
    {
        $this->wasCancelled = 'true';
    }
};
?>

<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>

    <div>Closed: {{ $wasClosed }}</div>
    <div>Cancelled: {{ $wasCancelled }}</div>

    <flux:modal @close="modalClosed" @cancel="modalCancelled" name="edit-profile" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:text class="mt-2">Make changes to your personal details.</flux:text>
            </div>

            <flux:input label="Name" placeholder="Your name" />

            <flux:input label="Date of birth" type="date" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

[ganyicz]

Hi @sertxudev,

Thanks @jeffchown!

As Jeff said, the cancel event fires on escape or click outside.

But I agree that this could be clearer from the docs. I submitted a PR.

[jeffchown]

You're welcome, @ganyicz !