Focus event on input field

Hi guys,

I have an input field which has to visible the date picker when focused on it. @focus event did not work in my code.

This is the code inside the template:-

 <v-date-picker
    	mode="single"
    	v-model="selectedDate"
    	:popover-visibility="pickerVisible">				
    	<input-field class="c-input-field--light"
    		@focus="togglePicker()" 
    		v-blur="removePicker">
    	</input-field>
    </v-date-picker>

This is the code inside script:-

     
    data() {
    	return {
                      pickerVisible: 'hidden',
    		}
    	},
    methods: {
        		togglePicker() {
        			let formerValue = this.pickerVisible;
        			this.pickerVisible = formerValue === 'visible' ? 'hidden' : 'visible';
        		},
        		removePicker() {
        			this.pickerVisible = 'hidden';
        		},
        	}

any help would be appreciated.

Having @focus toggle the value rather than set it seems unreliable. Try @focus="pickerVisible = 'visible'" instead.
Couldn’t you also just use @blur="pickerVisible = 'hidden'" instead of that custom directive?
I’d also use a Boolean instead of a String for this case.
However I don’t know if any of these tips will actually solve the problem.

Thank you for your valuable comment.
Actually @focus was not listening the event on the parent component because input is wrapped inside a div in the child component.

Given that you’re using a non-native element, you need to assign a native event like so:
<input-field @focus.native=“togglePicker()”>

1 Like