Autocomplete triggers close

xxxxxxxxxx
 
<template>
  <div class="container mt-115">
    <div class="row">
      <div class="col-4">
        <MDBAutocomplete id="client" autocomplete="true" v-model="autocompleteBasic" :filter="filterOptions" label="Example label" :displayValue="displayValueDisplay" @itemSelect="selectAuto()" @close="closeAuto()" />
      </div>
    </div>
  </div>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
import {
    MDBSelect,
    MDBAutocomplete
} from "mdb-vue-ui-kit";
import {
    ref
} from "vue";
​
export default {
    components: {
        MDBSelect,
        MDBAutocomplete,
    },
    setup() {
        const PartiesList = ref([]);
        const getItems = ref([]);
        const filterOptions = (value) => {
            let starttime = Date.now();
            let flag = "";
            let filteredOptions = PartiesList.value.filter((item) => {
                if (item) {
                    return item.toLowerCase().startsWith(value.toLowerCase());
                }
            });
            let returnOptions = [];
            if (filteredOptions.length > 0) {
                returnOptions = filteredOptions;
            }
            return returnOptions;
        };
        const displayValueDisplay = (value) => value.toUpperCase();
        return {
            PartiesList,
            getItems,
            filterOptions,
            displayValueDisplay,
        };
    },
    mounted() {
        this.PartiesList = ["Party 1", "Party 2", "Party 3"];
    },
    methods: {
        selectAuto() {
          console.log('value before timeout' + document.getElementById('client').value);
          setTimeout(function(){
            console.log('value after timeout' + document.getElementById('client').value);
          }, 500);
        },
        closeAuto() {
            console.log("close Auto");
        },
    },
};

Console errors: 0