I am new to vue3 and working with proxies, and am running into an issues setting focus on a proxy that is passed into my component as a prop.
In the parent component I have:
<Button ref="elementToFocus" @click="handleClickEvent"/>
<Modal :isOpen="toggleOpen" :returnFocus="$refs['elementToFocus']" @close="toggleOpen">
And in that Modal component I am accessing elementToFocus in a method that handles closing it:
handleClose() {
this.$emit('close');
if( this.returnFocus ) {
this.returnFocus.focus();
}
}
However, I keep getting the error TypeError: this.returnFocus.focus is not a function, I think because this.returnFocus is a Proxy. Do I need to access that element via vanilla JS instead? I'm not if this is an intended use for a proxy. Any help would be much appreciated!