Datepicker sometimes appears without calendar

[1337erik]

Describe the bug This is a completely sporadic issue that usually happens after a value was chosen and the user tries to re-open the calendar. If I open/close the calendar a few times the calendar will eventually open up with just the top row.

I have a hunch theres some issue with loading the proper day values, however there are no console errors. Sometimes the calendar will load with either a small set of the days and one time even after switching the month the calendar displayed with around 40-50 days total ( couldn't reproduce for screenshot ).. noticed that as i switch months, the days are often greyed out until i select a day and then it "realizes" that this group of days is within the month and should be text-color black

To Reproduce Setup a datetime picker with the same attributes as seen in the screenshot, select a value and open/close over and over again.

Expected behavior The calendar appears with the correct days - and the days at all - consistently

Screenshots or Videos

Dependencies

• WireUI Version: 1.7
• Laravel Version: 9.2
• Alpine.js Version: we only explicitly have @alpinejs/collapse at version ^3.10.3 in package.json, im assuming alpine is provided via dependency through wireui
• Livewire Version: ^2.10
• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: macOS Monterey
• Browser: Chrome
• Version: 104

Additional context Add any other context about the problem here.

[1337erik]

This is a really inconsistent issue where the calendar appears/disappears when you open/close one to many times with a value selected and toggle across months - anyone else ever see this?

[nearueng]

yep I've noticed this too. It's a bit unpredictable.

[nearueng]

@1337erik fyi, I've gone with the following workaround for now. It's a custom blade component made using flatpickr, but I made it work with wireui and swapped out all the wireui datepickers.

If you'd like to. use it.

I was using it in both deferred and non-deferred contexts, but this should do the trick.

You can customize it how you like.

Usage <x-app.datepicker label="Choose date" placeholder="Starting date" wire:model.defer="startDate"/>

datepicker.blade.php

@props(['label' => 'Choose date', 'placeholder' => 'Date', 'defer' => true])

<div>
    <div x-data="datepicker(@entangle($attributes->wire('model')))" class="relative">
        @if($defer)
            <x-input wire:model.defer="{{ $attributes->wire('model')->value() }}"
                     label="{{ $label }}"
                     placeholder="{{ $placeholder }}"
                     x-ref="myDatepicker"
                     x-model="value"
                     right-icon="calendar"/>
        @else
            <x-input wire:model="{{ $attributes->wire('model')->value() }}"
                     label="{{ $label }}"
                     placeholder="{{ $placeholder }}"
                     x-ref="myDatepicker"
                     x-model="value"
                     right-icon="calendar"/>
        @endif
    </div>

    @once
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('datepicker', (model) => ({
                    value: model,
                    init(){
                        this.pickr = flatpickr(this.$refs.myDatepicker, {
                            minDate: new Date(new Date().getTime() - 24*60*60*1000)
                        });

                        this.$watch('value', function(newValue){
                            this.pickr.setDate(newValue);
                        }.bind(this));
                    },
                    reset(){
                        this.value = null;
                    }
                }))
            })
        </script>
    @endonce
</div>

[1337erik]

appreciate the response, sad that the solution is to just not use the wireui calendar... any updates from a dev from this?

[Tiagospem]

sometimes this happened to me, but it was an error in the livewire rendering, I added wire:key in the dynamic elements and the problem was solved

[1337erik]

I have a few dynamic elements that are mostly keyed, if not all - are you referring to a particular dynamic element within the calendar component itself? If you're referring to other dynamic elements outside of the calendar then I am happy to report that those are already taken account for

[nearueng]

@Tiagospem I had all my elements keyed as well. Still happened from time to time.

[PH7-Jack]

@1337erik could you update the wireui and test again?

[PH7-Jack]

Closing it now. If the problem persists, let me know to reopen