In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the search box for options.
What I actually want is to execute the getInfo function when the user clicks on the Icon. If the user clicks elsewhere, then I want the Input search bar to become visible and accept user inputs.
I have tried adjusting various settings such as z-index and other approaches from tailwind css, but none seem to be working. Below is the Nuxt 3 component code that I am currently using:
<template>
<Field :name="name" v-model="item.value">
<vSelect
v-model="item"
:options="options"
:getOptionLabel="option.text"
class="w-full bg-gray-50 dark:bg-gray-700 rounded p-1 z-10"
appendToBody
>
<template #search="{ attributes, events }" class="z-10">
<Icon
v-if="displayInfoIcon"
icon="ph:info"
width="18"
height="18"
@click.native.stop.prevent="getInfo"
class="absolute right-1 top-1/2 transform -translate-y-1/3 cursor-pointer z-100"
/>
<input
class="vs__search w-full z-10"
v-bind="attributes"
v-on="events"
/>
</template>
</vSelect>
</Field>
<div class="text-center">
<ErrorMessage :name="name" class="text-red-500 mt-2 italic" />
</div>
</template>
// Script setup, imports, props, and computed values go here...
//On click of the info icon navigate to respective Ontology link
const getInfo = () => {
console.log("Function triggered: Select Dropdown With Search");
console.log("Name : " + props.name);
console.log("Model Value : " + item.value);
};
</script>
<style src="vue-select/dist/vue-select.css"></style>