How to focus v-radio-group selected radio programmatically? - vue.js

Question

How to focus v-radio-group selected radio programmatically ?
<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
<v-radio label="Radio 1" value="radio-1"></v-radio>
<v-radio label="Radio 2" value="radio-2"></v-radio>
</v-radio-group>
I tried with this.$refs.RadioGroup.focus() but nothing happens.
Thank you in advance

Answer 1

Two things
Vuetify adds divs and inputs to the DOM, so you need to dig in to the referenced element's children a little
you probably want to target one of the radio buttons since focusing the group seems to have no effect
This works, so might give you a idea to work with
<v-radio-group v-model="radios" :mandatory="false" ref="RadioGroup">
<v-radio label="Radio 1" value="radio-1" ref="Radio1"></v-radio>
<v-radio label="Radio 2" value="radio-2" ref="Radio2"></v-radio>
</v-radio-group>
this.$refs.Radio2[0].$el.children[0].children[0].focus()
Tested with this listener
created() {
document.addEventListener('focusin', event => {
console.log('focused', event.target)
})
},

Answer 2

Try using a custom directive. Add 'radio-focus' as a directive to the Vue Instance Add the v-radio-focus directive as an attribute to the v-radio element you wish to focus on. More about directives here.
'radio-focus': {
// directive definition
inserted: function (el) {
const $el: HTMLElement = el.children[0].children[0] as HTMLElement
$el.focus()
}
}