input event does not bubble for all inputs

[alexwass-lr]

Flux version

v2.0.2

Livewire version

v3.5.20

Tailwind version

v4.0.8

Browser and Operating System

Chrome on MacOS

What is the problem?

I am currently migrating sections at a time within my app and noticed a recent issue when I replaced the form input components in my modal with ones from Flux.

The wrapper of my form currently has an input listener (x-on:input) to track the state of any dirty input, which will initiate a confirm dialog if the user tries to close it without saving.

I've tried wire:dirty but it isn't suitable here - if a request is validated but has invalid data, it's no longer considered dirty because it's been synchronised, but is not yet persisted.

The components I'm aware of so far that don't allow this to bubble are:

• Checkbox
• Editor
• Select (listbox)

As you will see with the provided snippet, a simple text input still works as expected and triggers the dirty state - thus showing the "unsaved changes" message. However if you cancel (to clear the inputs) and try the others first, it will not set this and allow you to cancel without the confirm.

Code snippets

<?php

use Livewire\Attributes\On;
use Livewire\Volt\Component;

new class extends Component {
    public $title = '';
    public $content = '';
    public $industry = '';
    public $terms = false;

    #[On('close-dialog')]
    public function closed()
    {
        $this->reset();
    }

    public function save()
    {
        // Save the data...

        $this->reset();
        $this->dispatch('close-dialog');
    }
} ?>

<div
    x-data="{
        isDirty: false,
        handleClose () {
            if (this.isDirty) {
                if (confirm('{{ __('You have unsaved changes. Are you sure you want to close this dialog and discard your changes?') }}')) {
                    this.isDirty = false
                    $dispatch('close-dialog')
                }
            } else {
                $dispatch('close-dialog')
            }
        }
    }"
    x-on:close="handleClose"
    x-on:close-dialog.window="isDirty = false"
>
    <div x-on:input="isDirty = true" class="space-y-4">
        <flux:input wire:model="title" label="Title" />

        <flux:editor wire:model="content" label="Content" />

        <flux:select variant="listbox" wire:model="industry" placeholder="Choose industry...">
            <flux:select.option>Photography</flux:select.option>
            <flux:select.option>Design services</flux:select.option>
            <flux:select.option>Web development</flux:select.option>
        </flux:select>

        <flux:checkbox wire:model="terms" label="I agree to the terms and conditions" />

        <div class="flex items-center justify-end gap-4">
            <span x-cloak x-show="isDirty" class="text-sm text-gray-400">
                {{ __('Unsaved changes...') }}
            </span>
            <span x-on:click="$dispatch('close')">
                <flux:button>Close</flux:button>
            </span>
            <flux:button wire:click="save">Save</flux:button>
        </div>
    </div>
</div>

How do you expect it to work?

Ideally all inputs would allow the input event to bubble so that other native interactions could take place. Something is stirring in my memory about this causing issues with dialogs? So even if they were to dispatch a custom event just to indicate their state change that would amazing. Unless that already exists and I'm not spotting it?

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.

[joshhanley]

@alexwass-lr thanks for reporting! I've submitted a PR with a fix.

[alexwass-lr]

Amazing, thanks @joshhanley!