Livewire and Flatpickr - fails after rerender

Question

This may be a basic question, but I'm struggling. Essentially I have a livewire component that updates an array of flight information that a user enters. Whenever the components get rerendered, the flatpickr functionality stops working entirely. I presume this is because the javascript to initialize the component on that field is not running. What is the best practice to ensure these get rerendered with the appropriate javascript to enable the functionality.

Here's my blade snippet which renders fine on the initial load, but whenever a change to the data occurs, the page re-renders all the flights in the array, but the flatpickr functionality does not work anymore.

<form>
@foreach($flights as $i => $f)
<label
    x-data
    x-init="flatpickr($refs.input, {
    dateFormat: 'Y-m-d H:i',
    altInput: true,
    altFormat: 'F j, Y h:i K',
    enableTime: true,
    })">
    <div class="form-label">Arrival Time</div>
    <div class="relative">
      <input type="text"
        wire:model="flights.{{ $i }}.ArrivalTime"
        wire:key="fl{{ $i }}arrtime"
        data-input
        x-ref="input"
        placeholder="Arrival Time"
        value="{{ $f['ArrivalTime']}}"
        name="flights[{{ $i }}][ArrivalTime]"
        id="ArrivalTime{{$i}}"
      />
    </div>
</label>
@endforeach
</form>

The livewire component is basically this:

class Itinerary extends Component
{
    public $itin = null;
    public $flights = [];

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

Answer 1

You need to wrap the input in a <div> like this:

<div wire:ignore>
    <!-- Your input here -->
</div>

Source: https://laravel-livewire.com/docs/2.x/alpine-js#ignoring-dom-changes