Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoComplete: Multiple atribute does not work properly with primeflex #5658

Open
danillojose opened this issue Apr 29, 2024 · 0 comments
Open
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@danillojose
Copy link

danillojose commented Apr 29, 2024

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 danillojose added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 29, 2024
@danillojose danillojose changed the title AutoComplete: Multiple atribute does not work with primeflex AutoComplete: Multiple atribute does not work properly with primeflex Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant