Custom Select Component on Vue with SVG - vue.js

Question

I'm creating a custom select component on Vue and I'm using tailwind to style it.
I would like to have an chevron-down caret svg align to the right, which will open the select options when clicked. I'm having some trouble with this.
<template>
<div class="flex flex-wrap mb-4 relative">
<select :value="value" #input="$emit('input', $event.target.value)" class="w-full h-12 pl-4 bg-white focus:bg-grey-10 focus:text-grey-5 border-2 border-grey-9 rounded-lg text-sm focus:outline-none">
<option :value="null">
Select an option
</option>
<option v-for="option in options" :value="option.slug">{{ option.name }}</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="absolute mt-4 mr-4 right-0 cursor-pointer">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
</template>
<script>
export default {
props: [ 'value'],
data () {
return {
options: [
{ slug: 'test1', name: 'Test 1' },
{ slug: 'test2', name: 'Test 2' },
],
};
},
}
</script>
This is what it looks like, however the svg when clicked does not open the dropdown.
Any suggestions?

Answer 1

To the <svg> tag, you need to add the .pointer-events-none class. From the Tailwind Docs
Use .pointer-events-none to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.
There is a helpful custom select example in the Tailwind docs.