From 9e76c667938aa2d8b5bd66051514c34b05274bb8 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 4 Jul 2020 14:53:12 +0300
Subject: [PATCH] Fixed #359 - Filter event for Listbox, Dropdown and
 MultiSelect

---
 src/components/dropdown/Dropdown.d.ts       | 1 +
 src/components/dropdown/Dropdown.vue        | 5 ++++-
 src/components/listbox/Listbox.d.ts         | 1 +
 src/components/listbox/Listbox.vue          | 5 ++++-
 src/components/multiselect/MultiSelect.d.ts | 1 +
 src/components/multiselect/MultiSelect.vue  | 5 ++++-
 src/views/dropdown/DropdownDoc.vue          | 6 ++++++
 src/views/listbox/ListboxDoc.vue            | 6 ++++++
 src/views/multiselect/MultiSelectDoc.vue    | 6 ++++++
 9 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 17105ce3d..9fbcdb9d3 100755
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -25,6 +25,7 @@ export declare class Dropdown extends Vue {
     $emit(eventName: 'before-leave'): this;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
+    $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slot: {
         option: VNode[];
     }
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index cf1b9fcdb..766b48ed4 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -19,7 +19,7 @@
             <div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
                 <div class="p-dropdown-header" v-if="filter">
                      <div  class="p-dropdown-filter-container">
-                        <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" />
+                        <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown"  @input="onFilterChange"/>
                         <span class="p-dropdown-filter-icon pi pi-search"></span>
                     </div>
                 </div>
@@ -407,6 +407,9 @@ export default {
                 else
                     document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
             }
+        },
+        onFilterChange(event) {
+            this.$emit('filter', {originalEvent: event, value: event.target.value});
         }
     },
     computed: {
diff --git a/src/components/listbox/Listbox.d.ts b/src/components/listbox/Listbox.d.ts
index e50df407f..b53a83b06 100755
--- a/src/components/listbox/Listbox.d.ts
+++ b/src/components/listbox/Listbox.d.ts
@@ -17,6 +17,7 @@ export declare class Listbox extends Vue {
     ariaLabelledBy?: string;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
+    $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slots: {
         option: VNode[];
     }
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index 6dc940835..9f6bf41da 100755
--- a/src/components/listbox/Listbox.vue
+++ b/src/components/listbox/Listbox.vue
@@ -2,7 +2,7 @@
     <div class="p-listbox p-component">
         <div class="p-listbox-header" v-if="filter">
             <div class="p-listbox-filter-container">
-                <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">
+                <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder" @input="onFilterChange">
                 <span class="p-listbox-filter-icon pi pi-search"></span>
             </div>
         </div>
@@ -216,6 +216,9 @@ export default {
                 return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
             else
                 return null;
+        },
+        onFilterChange(event) {
+            this.$emit('filter', {originalEvent: event, value: event.target.value});
         }
     },
     computed: {
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 2d4a3d189..5e32fcba1 100755
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/src/components/multiselect/MultiSelect.d.ts
@@ -23,6 +23,7 @@ export declare class MultiSelect extends Vue {
     $emit(eventName: 'before-leave'): this;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
+    $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slots: {
         value: VNode[];
         option: VNode[];
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 347fc2908..4c249175d 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -26,7 +26,7 @@
                         </div>
                     </div>
                     <div v-if="filter" class="p-multiselect-filter-container">
-                        <input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder">
+                        <input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder" @input="onFilterChange">
                         <span class="p-multiselect-filter-icon pi pi-search"></span>
                     </div>
                     <button class="p-multiselect-close p-link" @click="onCloseClick" type="button" v-ripple>
@@ -339,6 +339,9 @@ export default {
                 else
                     document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
             }
+        },
+        onFilterChange(event) {
+            this.$emit('filter', {originalEvent: event, value: event.target.value});
         }
     },
     computed: {
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index d902e602b..1abbe033e 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -229,6 +229,12 @@ data() {
                                 <td>hide</td>
                                 <td>-</td>
                                 <td>Callback to invoke when the overlay is hidden.</td>
+                            </tr>
+                            <tr>
+                                <td>filter</td>
+                                <td>event.originalEvent: Original event <br />
+                                    event.value: Filter value </td>
+                                <td>Callback to invoke on filter input.</td>
                             </tr>
 						</tbody>
 					</table>
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index d189386b9..d10a7fbad 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -174,6 +174,12 @@ data() {
                                 <td>input</td>
                                 <td>value: New value</td>
                                 <td>Callback to invoke on value change.</td>
+                            </tr>
+                            <tr>
+                                <td>filter</td>
+                                <td>event.originalEvent: Original event <br />
+                                    event.value: Filter value </td>
+                                <td>Callback to invoke on filter input.</td>
                             </tr>
 						</tbody>
 					</table>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 0822ed9e1..b5ba7385b 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -218,6 +218,12 @@ data() {
                                 <td>-</td>
                                 <td>Callback to invoke when the overlay is hidden.</td>
                             </tr>
+                            <tr>
+                                <td>filter</td>
+                                <td>event.originalEvent: Original event <br />
+                                    event.value: Filter value </td>
+                                <td>Callback to invoke on filter input.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>