Estoy usando el paquete focus-trap para Vue3 para atrapar el foco dentro de un formulario, dentro de un modal. Tengo problemas con el :setInitialFocus , creo que porque el elemento al que intento hacer referencia inicialmente está oculto en la página. Intenté usar this.$nextTick para remediarlo, pero no tuve suerte.

En mi componente tengo:

 <focus-trap ref="focusTrap" :active="isFocusTrapActive" :initialFocus="() => $refs.modalForm" > <Modal @close="closeModal" :isOpen="openModal" > <AccountLoginForm :ref="modalForm"/> </Modal> </focus-trap>

La apertura del modal (y la trampa de enfoque) se manejan mediante:

 launchModal() { this.openModal = !this.openModal; this.$nextTick(() => { this.isFocusTrapActive = !this.isFocusTrapActive; }); },

Con esta configuración, cuando se abre el modal, aparece un error de superación de la pila máxima de llamadas.

También intenté simplemente asignar una referencia al componente modal y usarla para el accesorio setInitialFocus , como:

 <focus-trap ref="focusTrap" :active="isFocusTrapActive" :initialFocus="() => $refs['modalForm']" > <Modal @close="closeModal" :isOpen="openModal" ref="modalForm" > <AccountLoginForm/> </Modal> </focus-trap>

pero get un initialFocus did not return a node .

Lo único que PUEDO ponerme a trabajar es si no configuro initialFocus, entonces el foco queda atrapado dentro del modal cuando aparece, pero no en el formulario. No estoy seguro de lo que está pasando. Si alguien pudiera ofrecer alguna ayuda, sería muy apreciada.