Asset loading issues when multiple present.

[flatcapco]

I did a little video to show. The right of the screen is how it should look. The left is how it currently looks and the video shows that if you change the order of the included assets then the tailwind cdn is loaded OR the flatpickr CDN is loaded.. so it looks like it confuses itself:

https://capture.dropbox.com/CHEYBZWAtqJwk62J

hopefully just me being stupid :)

[flatcapco]

I should add that if I simply pop the scripts at the top of the file within the first div. and only asset load the js files then it all works as expected

[dircm]

Can you post your blade view ?

[dircm]

With flatPickr (and just about all javascript element controlling utilities), when you have multiple instances on the same page you have to ensure you provide unique element references.

Here is a snippet from one of my laravel components that used flatPickr

    x-init="this.instance = flatpickr($refs.{{ $uniqueRef }}, {
        ...@js($options),
        formatDate: function(date, format, locale) {
            return createLuxonObjectFromDate(date).toFormat(format);
        },
        onChange: function(selectedDates, dateStr, _) {
            let selectedDateTime = createLuxonObjectFromDate(selectedDates[0])

            setInstance(selectedDateTime)

            if (valueAndSelectedDateAreNotEqual(selectedDateTime)) {
                setValue(convertBrowserTimeToUTC(selectedDateTime))
            }
        }
    });

    $watch('value', Alpine.debounce(() => {
        let selectedDateTime = createLuxonObjectFromDate(this.instance.selectedDates[0])

        if (valueAndSelectedDateAreNotEqual(selectedDateTime)) {
            setInstance(convertUTCToBrowserTime(valueAsLuxonObject))
        }
    }), 500)

    setInstance(convertUTCToBrowserTime(valueAsLuxonObject))">
    <input x-ref="{{ $uniqueRef }}" {{ $attributes->except('wire:model.live')->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }} />

The important bit to note is the constructor flatpickr($refs.{{ $uniqueRef }}

and the input

<input x-ref="{{ $uniqueRef }}" {{ $attributes->except('wire:model.live')->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }} />

I pass in a unique ID for each flatPickr instance on the page to avoid ID collisions ;)

[flatcapco]

Hey @dircm sorry for the delay on this I'm just struggling for time at the moment but I do plan on setting up a simpler test to see if I can replicate the issue for you - its not a multi instance issue (just 1 on the page) and I can't really share the full code sadly but I'm happy to setup an example - but might be a few more days sorry

Thanks for all the help

[PhiloNL]

I'm curious, do you also get this problem when using it as a regular Livewire component instead of embedding?