From 305486dc8ae36679a77c73651928832be94f6abc Mon Sep 17 00:00:00 2001
From: pblasiak <pawel.blasiak@starbeta.com.pl>
Date: Thu, 19 May 2022 13:58:40 +0200
Subject: [PATCH 1/2] added a method for clearing the filter input

---
 src/components/multiselect/MultiSelect.vue | 10 ++++++++++
 src/views/multiselect/MultiSelectDemo.vue  | 11 ++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index d08929cb6..e7847d908 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -190,6 +190,10 @@ export default {
         selectAll: {
             type: Boolean,
             default: null
+        },
+        clearFilterOnHide: {
+            type: Boolean,
+            default: null
         }
     },
     data() {
@@ -285,6 +289,9 @@ export default {
         hide() {
             this.$emit('before-hide');
             this.overlayVisible = false;
+            if (this.clearFilterOnHide) {
+                this.filterValue = null;
+            }
         },
         onFocus() {
             this.focused = true;
@@ -598,6 +605,9 @@ export default {
                 originalEvent: event,
                 target: this.$el
             });
+        },
+        clearFilter() {
+            this.filterValue = null;
         }
     },
     computed: {
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 3cdd33a0b..a68f522b5 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/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: {

From 179d65b5ce194ea26d919a7ec2507f820f5f590c Mon Sep 17 00:00:00 2001
From: pblasiak <pawel.blasiak@starbeta.com.pl>
Date: Thu, 19 May 2022 14:16:10 +0200
Subject: [PATCH 2/2] updated documentation with new features

---
 src/views/multiselect/MultiSelectDoc.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 4a2fecd24..824213954 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/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>