Fixed #2664 - MultiSelect | resetFilterOnHide property

api-generator/components/multiselect.js

@@ -179,12 +179,18 @@ const MultiSelectProps = [
         default: "false",
         description: "Whether all data is selected."
     },
+    {
+        name: "resetFilterOnHide",
+        type: "boolean",
+        default: "false",
+        description: "Clears the filter value when hiding the dropdown."
+    },
     {
         name: "virtualScrollerOptions",
         type: "object",
         default: "null",
         description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
-    }
+    },
 ];
 
 const MultiSelectEvents = [

src/components/multiselect/MultiSelect.d.ts

@@ -182,15 +182,19 @@ export interface MultiSelectProps {
      * Default value is 'pi pi-spinner pi-spin'.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Whether all data is selected.
+     */
+    selectAll?: boolean | undefined;
+    /**
+     * Clears the filter value when hiding the dropdown.
+     */
+    resetFilterOnHide?: boolean;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * @see VirtualScroller.VirtualScrollerProps
      */
     virtualScrollerOptions?: VirtualScrollerProps;
-    /**
-     * Whether all data is selected.
-     */
-    selectAll?: boolean | undefined;
 }
 
 export interface MultiSelectSlots {

src/components/multiselect/MultiSelect.vue

@@ -184,16 +184,16 @@ export default {
             type: String,
             default: 'pi pi-spinner pi-spin'
         },
-        virtualScrollerOptions: {
-            type: Object,
-            default: null
-        },
         selectAll: {
             type: Boolean,
             default: null
         },
-        clearFilterOnHide: {
+        resetFilterOnHide: {
             type: Boolean,
+            default: false
+        },
+        virtualScrollerOptions: {
+            type: Object,
             default: null
         }
     },
@@ -290,7 +290,7 @@ export default {
         hide() {
             this.$emit('before-hide');
             this.overlayVisible = false;
-            if (this.clearFilterOnHide) {
+            if (this.resetFilterOnHide) {
                 this.filterValue = null;
             }
         },

src/views/multiselect/MultiSelectDemo.vue

@@ -27,7 +27,7 @@
                 </MultiSelect>
 
                 <h5>Advanced with Templating and Filtering</h5>
-                <MultiSelect ref="advancedMultiselect" v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" :clearFilterOnHide="false" class="multiselect-custom">
+                <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
                     <template #value="slotProps">
                         <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
@@ -43,11 +43,6 @@
                             <div>{{slotProps.option.name}}</div>
                             </div>
                     </template>
-                    <template #footer="">
-                        <div class="py-2">
-                            <Button label="Clear filter" @click="clearAdvancedTemplatingFilterInput" />
-                        </div>
-                    </template>
                 </MultiSelect>
 
                 <h5>Loading State</h5>
@@ -74,7 +69,6 @@ export default {
             selectedGroupedCities: null,
             selectedItems: null,
             selectAll: false,
-            // clearFilterOnHide: false,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
@@ -131,9 +125,6 @@ export default {
         },
         onChange(event) {
             this.selectAll = event.value.length === this.items.length
-        },
-        clearAdvancedTemplatingFilterInput() {
-            this.$refs.advancedMultiselect.clearFilter()
         }
     },
     components: {

src/views/multiselect/MultiSelectDoc.vue

@@ -327,17 +327,17 @@ export default {
                         <td>false</td>
                         <td>Whether all data is selected.</td>
                     </tr>
+                    <tr>
+                        <td>resetFilterOnHide</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Clears the filter value when hiding the dropdown.</td>
+                    </tr>
                     <tr>
                         <td>virtualScrollerOptions</td>
                         <td>object</td>
                         <td>null</td>
                         <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
-                    </tr>
-                    <tr>
-                        <td>clearFilterOnHide</td>
-                        <td>boolean</td>
-                        <td>false</td>
-                        <td>Whether to clear filterInput when the overlay is hidden.</td>
                     </tr>
 				</tbody>
 			</table>