Input focused when I out the input

[BodaMat]

Hi, everyone

When I click on input, this element don’t focused, but when I focused out the input, input focused.

Can you help me?

<template>
	<div class="row q-mb-sm">
		<q-input
			outlined
			:value="name"
			@input="$emit('update:name', $event)"
			@focus="selectText"
			:rules="[val => !!val || 'Field is required']"
			autofocus	
			ref="name"
			label="Task name"
			class="col"
		>
			<template v-slot:append>
				<q-icon
					v-if="name"
					@click="$emit('update:name', '')"
					name="close"
					class="cursor-pointer" />
			</template>
		</q-input>
	</div>
</template>

<script>
export default {
	props: ['name'],
	methods: {
		selectText() {
			console.log(this.$refs.name)
			this.$refs.name.select()
		}
	},
	directives: {
		selectAll: {
			inserted(el) {
				let input = el.querySelector('.q-field__native')
				input.addEventListener('focus', () => {
					console.log('focused')
					if(input.value.length)
						input.select()
				})
			}
		}
	}
}
</script>