primevue
primevue copied to clipboard
AutoComplete: Multiple atribute does not work properly with primeflex
Describe the bug
<AutoComplete
inputId="agenteFinanceiroId"
v-model="agenteFinanceiro"
placeholder="Selecione o Agente Financeiro"
optionLabel="nome"
:suggestions="filteredAgentesFinanceiros"
:class="{ 'p-invalid': errorMessage }"
@complete="autocompleteAgenteFinanceiro($event)"
dropdown
forceSelection
multiple
>
<template #option="slotProps">
<div class="flex align-options-center">
<div>
{{ slotProps.option.cnpj ? slotProps.option.cnpj + ' - ' +
slotProps.option.nome : slotProps.option.nome }}
</div>
</div>
</template>
</AutoComplete>
The behavior of autocomplete above isn't normal. While in another form components (or even in autocomplete without multiple), I do not need to declare any h-full class to resize element, in AutoComplete with multiple
atribute this do not work for me, even when I declare this class or inline style or also inputStyle classes.
Just to help you, maybe this will work in this case. I added a css reference in deep mode to autocomplete class .p-autocomplete
and also to ul
element. Look at this:
<style scoped>
:deep(.p-autocomplete ul) {
width: 100%;
}
</style>
I don't know why any answer worked for me, but this one works! I hope will help anyone.
Reproducer
(https://stackblitz.com/edit/jbb7mv)
PrimeVue version
3.51.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response