Livewire and flatpickr: null data on change

Disclaimer: I know there are already a few questions regarding coupling Livewire and flatpickr, yet I don't understand the solutions provided, since they are very different from how I'm approaching the problem. That said, I'm still learning Livewire, so I might just be doing it wrong.

I have a Livewire component where I use flatpickr to select both date and time.

<div class="mb-3" >
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

In the blade component, I have also the script section to init flatpickr:

<script>
    flatpickr("#chosendatetime", {
        enableTime: true,
        dateFormat: "d-m-Y H:i",
    });
</script>

The date picker is rendered correctly, but when I change its value the data sent by the client is empty.

What should I do?

Solution

try to add wire:ignore to the div element, like this:

<div class="mb-3" wire:ignore>
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

This directive lets Livewire know that it should skip this part of the page and not change it when the component refreshes. If you don't use it, Livewire could replace the flatpickr instance and make it stop working.