Open matthew-dean opened 5 months ago
Although the exact reason why the selected value disappears when typing in the filter box is unclear, I found a workaround to solve this issue.
By customizing the #value
slot in the Dropdown, the problem can be fixed. Here’s an example of how to solve this issue using your code base:
<Dropdown
filter
v-model="selectedDomain"
:options="domainsFiltered"
optionValue="name"
optionLabel="name"
>
<template #value="{ value, placeholder }">
<template v-if="value">
{{ value }}
</template>
<template v-else>
{{ placeholder }}
</template>
</template>
</Dropdown>
Describe the bug
I'm not sure why, but for some reason this Dropdown behavior differs from what's on the PrimeVue website (even though this is forked from the StackBlitz links on this page). I'm having the same issue -- if I start typing to filter the list, it will not preserve the selected item. I want the Dropdown to ALWAYS have an item from the list selected, even if the list is filtered and that item is not showing.
Reproducer
https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-y9th74?file=src%2FApp.vue
PrimeVue version
3.47.2
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
Chrome 123
Steps to reproduce the behavior
Expected behavior
I want to be able to limit the Dropdown to always having a selection from the list (and ideally defaulting to the first item, just like an HTML dropdown would). See: https://github.com/orgs/primefaces/discussions/1663