Input focused when I out the input



  • 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>
    

Log in to reply