Fixed #359 - Filter event for Listbox, Dropdown and MultiSelect

primefaces · Jul 4, 2020 · 9e76c66 · 9e76c66
1 parent 9ba8911
commit 9e76c66
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>