primevue icon indicating copy to clipboard operation
primevue copied to clipboard

AutoComplete: Multiple atribute does not work properly with primeflex

Open danillojose opened this issue 9 months ago • 0 comments

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

danillojose avatar Apr 29 '24 20:04 danillojose