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

    	<input-field class="c-input-field--light"

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