Custom Directive not working properly

[Avada Kedavra]

I was faced with the following problem.
I create a custom Directive that identifies the contents of the input field but the text field is highlighted only when re-setting the focus.

<q-input
        outlined 
        :value="name"
        autofocus
        v-select-all
        ref="name"
        label="Task Name"
        class="col"
        >

Derective code

selectAll:{
       inserted(el){
           let input = el.querySelector('.q-field__native')
           input.addEventListener('focus', ()=> {
                   if (input.value.length) {
                            input.select()
                            console.log('input selected')
                        }
               })
           }
       }

Directive though autofocus sets the focus to the desired field to me, but the content is not highlighted. What to do?(

[dobbel]

@Avada-Kedavra

People here can help you better if you create a codepen.io ( very easy to do , just extend one of quasar’s example codepens) to demo your problem.