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.