I am currently working on an autocomplete field. When a user enters text that matches the result set, the dropdown result will populate. If there is no match, clicking outside the field will forcefully reset the input.
To achieve this functionality, I have implemented a custom Vue directive called click outside.
// Code for click outside directive
An example of using the autocomplete field in form fields:
<div v-if="field.type == 'autocomplete'">
<vu-auto-complete
v-model="fieldvalues[field.key]"
:items="formFieldAutocompleteItems[fieldvalues[field.key]] || []"
:label="labelrequired(field)"
:placeholder="field.placeholder"
:error-message="errorMsg[field.key]"
@input="handleOnInput($event, field)"
@selected="getSelectedData($event, field)"
>
</vu-auto-complete>
</div>
Methods for handling input in the autocomplete field:
// Code for handleOnInput method
The autocomplete field is functioning correctly. However, I require a directive or method to reset any input by clicking outside. Any suggestions or examples would be greatly appreciated.