Feature Request: AutoComplete - Do not hide after select.

[antlionguard]

When using autocomplete with the multiple option, it can become very annoying to have the dropdown close every time. It would be much better to control this with a prop like (hide-dropdown-on-select).

[tugcekucukoglu]

For this situation, I can recommend using MultiSelect for now. There may be slight differences between the APIs they use.

[lakkvak]

I'd like to see that feature too 🙏

[SchwarzesWasser]

MultiSelect is not a suitable replacement, since the need to maintain the ability for manual data entry. I noticed that prior to the ‘item-select’ event all necessary logic was executed, and afterward there was only the concealment of the panel. And if the line is commented out, the behavior becomes similar to what was expected. Perhaps the addition of an additional prop would solve this problem? Or do we need more substantial modifications?

[harley-shugart]

Hi @antlionguard, I faced this same issue and found a solution which works for me for now. More complicated than if we had a baked in prop, but for now it works for my needs. Perhaps it will help you too. It leverages the item-select and before-hide events as well as vue's nextTick.

Essentially I listen for an item-select and set a variable indicating it needs to remain open. Then in my before-hide handler, I check for that value and if it's true, use nexttick and fire a function call that would reopen the dropdown. This has the visual effect of the list/dropdown appearing to have never closed.

<script setup lang="ts">
import AutoComplete from 'primevue/autocomplete';
import {nextTick} from 'vue';

let keepOpen = false;

const openDropdown = () => {
    //whatever logic you want to use to trigger the dropdown/options list to open.
};

const selectHandler = () => {
  keepOpen = true;
};

const beforeHideHandler = () => {
  if(keepOpen){
    nextTick(() => {
      keepOpen = false;
      openDropdown();
    });
  }
};
</script>

<template>
  <AutoComplete multiple @item-select="selectHandler" @before-hide="beforeHideHandler"></AutoComplete>
</template>

[bogdan0083]

Hey guys! I finally found a time to implement this feature: primefaces/primevue#5665

Please let me know what can be improved in terms of code or documentation.

[SchwarzesWasser]

Looks good, thanks!