Window.getComputedStyle

[eafarooqi]

Hi,

i am getting this error with the latest version after updating to 1.3.1 as soon as i re-initiate the control after livewire ajax request. The control is working fine with the old version

i can trace the issue to the following function in Picker.js file line 115.

function getTextDirection(el) {
  return window.getComputedStyle(el).direction;
}

The element is first initiated on page load and then after the ajax with the following code.

<script>
        document.addEventListener('livewire:load', function () {

            const el = document.querySelector('#{{ $name }}');
            const datepicker = new Datepicker(el, {
                buttonClass: 'btn',
                language:'de',
                calendarWeeks: true,
                autohide: true,
                //container: ".datepicker-container",
                title:el.getAttribute('data-date-title') ? el.getAttribute('data-date-title') : '',
            });

            // handing change event
            el.addEventListener('changeDate', function (e) {
                @this.set('selectedDate', e.target.value);

                // sending value to the parent component if defined
                if(el.getAttribute('data-parent-event')) {
                    @this.emitUp(el.getAttribute('data-parent-event'), e.target.value);
                }
            });

            Livewire.on('setDatePicker', data => {
                if(data){
                    datepicker.setDate(data);
                }
            })
        })
    </script>

[mymth]

Could you tell me what error you are getting so that I can grasp what is happening quickly?

The part you mentioned is not changed from v1.2 (there are minor refactorings, actually, but the logic is the same). I'm not sure which version you meant by "the old version", but If it's v1.1.x or earlier, I think using the container: 'body' option might work for a quick-and-dirty solution. (it was pre-v1.2's default)

[adam-torok]

@mymth this indeed worked for my case

 if(PICKER){
        const datepicker = new Datepicker(PICKER, {
            buttonClass: 'btn',
            daysOfWeekDisabled: [6,0],
            format: 'yyyy-mm-dd',
            datesDisabled: DISABLED_DATES,
            language: 'hu',
            title: "Rendelés leadása adott napra",
            minDate: MIN_DATE,
            maxDate: MAX_DATE,
            container: 'body'
        });

        PICKER.addEventListener('changeDate', function (event) {
            const SELECTED_DATE = formatDate(event.detail.date);
            Livewire.emit('dateSelected', SELECTED_DATE);
        });
    }

And now it emits and binds data successfuly