I have a simple google maps in my vue application that I load using the fawm google maps library. I’m using the autocomplete feature, on keystroke the input loads up some possible options and when clicked the pin on the map gets redirected. just the default behaviour, like in google maps. I want to add a feature where I can click on the search icon when typing the address and It’ll automatically change the pin to the address of the first option in the autocomplete select list. I’ve managed to found how to do it just on enter keystroke, with the help of select-first-on-enter=”true”, but I struggle to implement it with a click on an icon.
I’ve tried triggering an enter keyboard event on that input when the icon is clicked, but it does nothing, I would apprceiate any help !
The autocomplete component :

<section class="auto">
        <Search class='search' @click='searchButton'/>
        <GMapAutocomplete
        v-if="mapMounted"
        select-first-on-enter="true"
        :placeholder="tr('ძიება')"
        @place_changed="setPlace"
        style="font-size: x-large"
        id='search"
      >
      </GMapAutocomplete>
     </section>

The event dispatch :

const searchButton = () => {
    const element = document.getElementById('search');
    element?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
}

Thanks in advance!