Autocomplete Suggestion's are not appearing on focus and also also when selecting something from the dropdown again the input textbox is getting focused and the method is getting invoked , want to stop the same as well

[Subhajit16062023]

<AutoComplete ref="autoCompleteRef" v-model="selectedEmp" :suggestions="EmpList" optionLabel="empName" @Focus="showtopfiveresults" @complete="search"
@item-select="validation" style="width: 100%" placeholder="Search Employee">

// Function to show top 5 results
const showtopfiveresults = async (event: any) => {
if (props.imperSonationFlag) {
try {
const endpoint = "/Authentication/ImpersonationHistory";
const response = await api.post(endpoint, {});
const data = response.data || [];

  console.log("Response data:", data);

  // Map response data to suggestions
  EmpList.value =
    data.length === 1
      ? [{ empName: data[0] }]
      : data.map((email: string) => ({ empName: email }));

  console.log("EmpList:", EmpList.value);

  // Explicitly trigger the dropdown using the ref
  if (autoCompleteRef.value && EmpList.value.length > 0) {
    console.log("AutoComplete component", autoCompleteRef.value);
   await nextTick(); // Wait for DOM updates
    (autoCompleteRef as any).value.$emit("complete");      
  }

} catch (error) {
  console.error("Error fetching impersonation history:", error);
}

} else {
console.log("Impersonation flag is false, skipping.");
}
};
const search = (event: any) => {
var postData = { "SearchBy": {}, "SortBy": {} }

const containsOnlyNumbers = /^\d+$/.test(selectedEmp._value);
let searchField = "employeeEmail";
let apiUrl = "";
if (containsOnlyNumbers) {
searchField = "EmployeeId";
}
if(!props.imperSonationFlag){
apiUrl = /UserManagement/AddNewUserColumnSearch?searchField=${searchField}&searchText=${selectedEmp._value}&size=10;
}
else{
postData = {
"SearchBy": {
"fiscalPeriod": apiStore.selectedPeriod.code
},
"SortBy": {}}
searchField = "employee_Email";
apiUrl = /UserManagement/UserColumnSearch?searchField=${searchField}&searchText=${selectedEmp._value}&size=10;
}
api.post(apiUrl, postData)
.then((res: any) => {
console.log("res.data: " + JSON.stringify(res.data));
if (res.data.length === 1) {
EmpList.value = [{ empName: res.data[0] }];
} else {
EmpList.value = res.data.map((email: string) => {
return { empName: email };
});
}
});

}
Would request the team to please help me to show the suggestions on focus and stop the focus on selecting item from the dropdown.