From 6f71f8195e06204064ad803f61bfb3efd46517a3 Mon Sep 17 00:00:00 2001
From: akshayaqburst <123446355+akshayaqburst@users.noreply.github.com>
Date: Tue, 16 Jan 2024 16:45:32 +0530
Subject: [PATCH] fix: Primefaces#5060, Dropdown: After selecting an option,
 clearing the value using close icon should clear the filter input (#5061)

* fix: Primefaces#5060, Dropdown: After selecting an option, clearing the value using close icon should clear the filter input

* fix: Primefaces#5060, Dropdown: After selecting an option, clearing the value using close icon should clear the filter input

---------

Co-authored-by: Akshay Antony <akshayantony55@gmail.com>
---
 api-generator/components/dropdown.js     | 6 ++++++
 components/lib/dropdown/BaseDropdown.vue | 4 ++++
 components/lib/dropdown/Dropdown.d.ts    | 5 +++++
 components/lib/dropdown/Dropdown.vue     | 1 +
 doc/common/apidoc/index.json             | 8 ++++++++
 doc/dropdown/FilterDoc.vue               | 2 +-
 6 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
index 1a4f63222..36b5e1a5f 100644
--- a/api-generator/components/dropdown.js
+++ b/api-generator/components/dropdown.js
@@ -185,6 +185,12 @@ const DropdownProps = [
         default: 'false',
         description: 'Clears the filter value when hiding the dropdown.'
     },
+    {
+        name: 'resetFilterOnClear',
+        type: 'boolean',
+        default: 'false',
+        description: 'Clears the filter value when clicking on the clear icon.'
+    },
     {
         name: 'virtualScrollerOptions',
         type: 'object',
diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue
index 755a63ccb..bd4168458 100644
--- a/components/lib/dropdown/BaseDropdown.vue
+++ b/components/lib/dropdown/BaseDropdown.vue
@@ -106,6 +106,10 @@ export default {
             type: Boolean,
             default: false
         },
+        resetFilterOnClear: {
+            type: Boolean,
+            default: false
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index 3e86a0347..e301e1b14 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -389,6 +389,11 @@ export interface DropdownProps {
      * @defaultValue false
      */
     resetFilterOnHide?: boolean;
+    /**
+     * Clears the filter value when clicking on the clear icon.
+     * @defaultValue false
+     */
+    resetFilterOnClear?: boolean;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      */
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 9f5727777..ec072002c 100755
--- 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.resetFilterOnClear && (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/common/apidoc/index.json b/doc/common/apidoc/index.json
index 40d6c4932..e28e58ec3 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -24158,6 +24158,14 @@
                             "default": "false",
                             "description": "Clears the filter value when hiding the dropdown."
                         },
+                        {
+                            "name": "resetFilterOnClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when clicking on the dropdown."
+                        },
                         {
                             "name": "virtualScrollerOptions",
                             "optional": true,
diff --git a/doc/dropdown/FilterDoc.vue b/doc/dropdown/FilterDoc.vue
index dd7df8d72..6723d73b8 100644
--- 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" />