Data binded modal automatically closes when input is emptied

[jakuborava]

I tried to implement Data binding example from https://fluxui.dev/components/modal. Modal has an input, I type some text and if I do Cmd + A and backspace/delete, modal is automatically closed. Same happens when I delete all characters one by one using backspace/delete.

Livewire component code:

<?php

namespace App\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $showModal = false;

    public function openModal() {
        $this->showModal = true;
    }

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

Livewire component view:

<div>
    <flux:button wire:click="openModal()">Delete post</flux:button>

    <flux:modal wire:model="showModal" name="edit-profile" class="md:w-96 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 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>
    </flux:modal>
</div>

This is probably related to https://github.com/livewire/flux/issues/65.

[HassanDomeDenea]

Any workaround for this ? modifying the stub or something ?

It is really frustrating

[lucasromanojf]

Hello! For now I'm using the following workaround instead of binding the modal to wire:model:

To open the modal, dispatch the following event (in my case I do it using Alpine and x-on:click instead of wire:click):

document.dispatchEvent(new CustomEvent('modal-show', { detail: { name: 'your-modal-name' } }))

To close the modal, you do the same but instead of 'modal-show' you have to dispatch a 'modal-close' event.