The "focus" method sometimes works, sometimes it doesn't.

[r1z4x]

Hello,

As soon as I opened the modal window, there was no focus focus. I supported it with "settimeout". But still, focus works sometimes. Sometimes it doesn't work.

` openModal(id) {

        this.modalId = id
        
        this.$nextTick(() => {
            this.trapCleanup = focusTrap(document.querySelector('#' + this.modalId))
            setTimeout(() => {
                this.$refs['first_name'].focus();
            }, 300);
        })

        this.$watch('isModalOpen', (val) => {

            if(this.modalId == null) return;

            if(val == true){
                this.getProfile()
            }

        })`

[SimoTod]

Focus is a standard browser api, if it doesn't work, it's likely that you are trying to focus and element which is not visible yet.
Isn't focustrap.js supposed to focus the right element already?
It's also weird that you define a watcher every time you open a modal, it means that you duplicate that callback every time. Watchers should go in a x-init directive.
Not related but, from the previous post, it's not great to define x-data on the html tag, it defeats Alpine's philosophy of structuring your code using micro components and it has a performance impact on big pages.