fix: primefaces#5060, Dropdown: After selecting an option, clearing t…

…he value using close icon should clear the filter input
qburst · Jan 11, 2024 · fa50897 · fa50897
1 parent 6dfbbea
commit fa50897
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
@@ -421,6 +421,7 @@ export default {
         },
         onClearClick(event) {
             this.updateModel(event, null);
+            this.filterValue = null;
         },
         onFirstHiddenFocus(event) {
             const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;

diff --git a/doc/dropdown/FilterDoc.vue b/doc/dropdown/FilterDoc.vue
@@ -3,7 +3,7 @@
         <p>Dropdown provides built-in filtering that is enabled by adding the <i>filter</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+        <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem" showClear>
             <template #value="slotProps">
                 <div v-if="slotProps.value" class="flex align-items-center">
                     <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />