Alpine Componet inside Modal

[robs007]

I'm trying to add a datepickr to a input field in a flux modal. It doesn't work inside the modal but works outside it. I assume the alpine I'm using for the date picker is conflicting with the alpine in the flux modal. Is there a way to make this work? I'm new to alpine.

    <flux:modal name="add-class" class="md:w-96 space-y-6">
        <div>
            <flux:heading size="lg">Add Classes</flux:heading>
            <flux:subheading></flux:subheading>
        </div>
        <div x-data="{
                value: @entangle('dateRange').live,
                startDate: @entangle('startDate').live,
                endDate: @entangle('endDate').live,
                init() {
                    let picker = flatpickr(this.$refs.picker, {
                        mode: 'range',
                        dateFormat: 'm/d/Y',
                        defaultDate: this.value,
                        onValueUpdate: (date, dateString) => {
                        console.log(this.value)
                        console.log(date[1])
                            this.value = dateString.split(' to ')
                            this.startDate = flatpickr.formatDate(date[0], 'Y-m-d')
                            if(date[1])
                            {
                                this.endDate = flatpickr.formatDate(date[1], 'Y-m-d')
                            }
                        }
                    })
                    this.$watch('value', () => picker.setDate(this.value))
                },
            }"
        >
            <flux:input icon-trailing="calendar" wire:loading.attr="disabled" type="text" label="Class Range"
                        class="flex flex-row justify-start w-32"
                        x-ref="picker"
                        wire:model.live="startDate"/>
        </div>


        <flux:input label="Name" placeholder="Your name" />

        <flux:input label="Date of birth" type="date" />

        <div class="flex">
            <flux:spacer />

            <flux:button type="submit" variant="primary">Save changes</flux:button>
        </div>
    </flux:modal>

[ju5t]

I think it's more likely that the library you're using doesn't play ball with the dialog-element.