Merge pull request #2550 from Pawloski-engineer/clearing_filterValue

resolves #2481 added a method for clearing the filter input

src/components/multiselect/MultiSelect.vue

@@ -191,6 +191,10 @@ export default {
         selectAll: {
             type: Boolean,
             default: null
+        },
+        clearFilterOnHide: {
+            type: Boolean,
+            default: null
         }
     },
     data() {
@@ -286,6 +290,9 @@ export default {
         hide() {
             this.$emit('before-hide');
             this.overlayVisible = false;
+            if (this.clearFilterOnHide) {
+                this.filterValue = null;
+            }
         },
         onFocus() {
             this.focused = true;
@@ -599,6 +606,9 @@ export default {
                 originalEvent: event,
                 target: this.$el
             });
+        },
+        clearFilter() {
+            this.filterValue = null;
         }
     },
     computed: {

src/views/multiselect/MultiSelectDemo.vue

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

src/views/multiselect/MultiSelectDoc.vue

@@ -332,6 +332,12 @@ export default {
                         <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>
@@ -410,6 +416,11 @@ export default {
                         <td>hide</td>
                         <td>-</td>
                         <td>Hides the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>clearFilter</td>
+                        <td>-</td>
+                        <td>Clears filter input.</td>
                     </tr>
 				</tbody>
 			</table>