Not being able to access "document" object.

[r1z4x]

Hello there,

I am using more than one nested "x-data" method. But I cannot access the "document" object in the function in x-data. It has a "null" value.

Inside the head tag.

`<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<script src="{{ asset('js/focus-trap.js') }}"></script>
<script src="{{ asset('js/init-alpine.js') }}"></script>

`

Inside HTML "dom" elements.

`

<button @click="openModal('editProfileModal')" class="text-sm px-3 py-2 font-medium leading-5 text-white transition-colors duration-150 bg-blue-900 rounded-md focus:outline-none focus:shadow-outline-">
{{ __('auth.profile.edit_profile') }}

                        <form id="edit-profile-form" method="POST" action="/aaaaa">
                            @csrf
                            


                        </form>
                    </x-modal>
                    <script type="text/javascript">
                        
                        function editProfileForm() {

                            return {
                                // Modal
                                isModalOpen: false,
                                trapCleanup: null,
                                openModal(id) {
                                    this.isModalOpen = true
                                    this.trapCleanup = focusTrap(document.querySelector('#' + id))
                                },
                                closeModal() {
                                    this.isModalOpen = false
                                    this.trapCleanup()
                                },
                            };

                        }
                    </script>
                </div>`

[SimoTod]

Did you try console.log(document), I tried on different components and it doesn't have a null value. Can you check that null is not the value returned by your querySelector call?

[r1z4x]

It gives the same error I tried. But the DOM ID is in the "template" tag. Could it be caused by it?

But, There is a situation like this. There is an x-data of HTML. It contains general descriptions.

[SimoTod]

Yeah, I think that's the reason (template tag). At that point, alpine hasn't updated the dom yet because the execution is debounced.
You need to use $nextTick(() => focusTrap(...)) to ensure the modal will be available in the DOM

[r1z4x]

The problem has been resolved, thank you.