Modal close to call function feature

[omniith]

Hi team,

Can we have a feature where Flux:modal closes to call function please?

Right now only putting a button in Flux:modal.close is able to call a function while closing the modal. But the X-MARK on the top does not tie in with the button's wire:click. Closing form modals mostly need to reset forms.

Hope to see this feature implemented.

[jeffchown]

Hi @omniith .

You can wire:model.self a property to your modal, then add an updated<propertyName> method to effectively 'watch' the property so when the modal is closed by clicking on the x, your property will be set to false and you can reset the form in the updated<propertyName> method.

e.g.

in your component file:

class FluxTest extends Component
{
    public bool $open = false;

    public string $name = '';

    public function save(): void
    {
        $this->validate();

        // ...save to db, etc.
    }

    public function updatedOpen(mixed $value): void
    {
        // check to see if $value == false, meaning the modal has been closed
        if (! $value) {
            $this->reset('name');
        }
    }

    public function render()
    {
        return view('livewire.flux-test');
    }
}

in your view file:

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

    <flux:modal wire:model.live.self="open" name="edit-profile" class="md:w-96">
        <form wire:submit.prevent="save" class="space-y-6">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:subheading>Make changes to your personal details.</flux:subheading>
            </div>

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

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

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

[omniith]

@jeffchown Thank you for your solution, just want to know if there will be an integrated feature worked on or this is the solution going forward? I'm sorry if i have mistaken you as Flux team.

[jeffchown]

@omniith You're welcome. We'll see if @calebporzio and team implement such a feature.
You have indeed mistaken me for a team member :). I am merely a happy Flux-er helping where I can.

[calebporzio]

Added a close listener in the latest release: https://fluxui.dev/components/modal#close-events

[jeffchown]

Nice! Thanks, @calebporzio !

[omniith]

@calebporzio Brilliant! love your works!