Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Window.getComputedStyle #143

Open
eafarooqi opened this issue May 3, 2023 · 2 comments
Open

Window.getComputedStyle #143

eafarooqi opened this issue May 3, 2023 · 2 comments

Comments

@eafarooqi
Copy link

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
Copy link
Owner

mymth commented May 6, 2023

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
Copy link

adam-torok commented Mar 7, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants