Hitting backspace in an input inside a model with wire:model closes the modal

[joshhanley]

Flux version

v1.0.29

Livewire version

v3.5.17

What is the problem?

If you have a modal that is wire:model to a property, and have an input inside the modal, entering anything into the input and then hitting backspace closes the modal.

Copy the below Volt component and then:

1. Click on "Show Modal"
2. In the "Name" input enter any letter like "a"
3. Then press the delete key
4. Watch the modal magically close!

Code snippets

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $show = false;
};
?>

<div>
    <flux:modal.trigger name="name-modal">
        <flux:button variant="primary" size="sm">Show Modal</flux:button>
    </flux:modal.trigger>

    <flux:modal name="name-modal" wire:model="show" class="!w-full">
        <flux:input wire:model="name" label="Name" />
    </flux:modal>
</div>

How do you expect it to work?

It shouldn't close the modal!

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.

[ju5t]

That's strange. I tried to replicate this in my test environment but I can't. I assume you checked the XHR-tab in your network requests already? Interesting to see what happens there. Does the $show property change?

[joshhanley]

@ju5t thanks for testing! Hmm 🤔 I tested it in two different repos. But it's possible I'm using a local version of Flux that might have changes.

Just double checked and there was no network request.

But I did just notice this...

It seems like the input events that the input are firing are bubbling up to the modal and the modal is receiving the values. Using wire:mode.stop="name" doesn't change anything.

[ju5t]

I can replicate it in a new installation somehow.

But it looks like the solution is documented:
https://fluxui.dev/components/modal#data-binding

If you change wire:model to wire:model.self on the modal everything works.

[jeffchown]

This goes back to this issue #66

[joshhanley]

@ju5t ah yep thanks! I do remember that now haha. I'm going to leave this open to see if we can find a better way to solve it as I'm sure it will trip other people up too.

[joshhanley]

I've submitted a PR that adds .self automatically so developers don't need to worry about it.

PR description below.

The scenario

If you have a modal that is wire:model to a property, and have an input inside the modal, entering anything into the input and then hitting backspace closes the modal.

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $show = false;
};
?>

<div>
    <flux:modal.trigger name="name-modal">
        <flux:button variant="primary" size="sm">Show Modal</flux:button>
    </flux:modal.trigger>

    <flux:modal name="name-modal" wire:model="show" class="!w-full">
        <flux:input wire:model="name" label="Name" />
    </flux:modal>
</div>

The problem

This happens because the input is dispatching an input event that is bubbling up to the wire:modal on the modal. When the input value is deleted, it becomes falsey which is then what is causing the modal to close.

Now we already have it documented that developers should use wire:model.self on the modal but people are still getting tripped up by it, including myself multiple times. 🤦‍♂️

The solution

To solve this permanently, I have update the modal component to detect if wire:model is used without .self, and if it is, it then adds .self to the wire:model directive.

Now this does mean that someone won't be able to actually use wire:model without .self on their modal, but I can't imagine a scenario when you would want that.

If an issue does get raised though, we can always add a 'self' => true prop, that allows someone to do <flux:modal wire:model="test" :self="false"> to disabled it. But I don't think that will happen, so I haven't done that in this PR.

Fixes #850