Merge pull request #4874 from mroettgen/features/mroettgen/tree-add-search-event

Add 'filter'-event to Tree.vue

components/lib/tree/Tree.d.ts

@@ -61,6 +61,21 @@ export interface TreeSelectionKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom filter event.
+ * @see {@link TreeEmits.filter}
+ */
+export interface TreeFilterEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Filter value
+     */
+    value: string;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link TreeProps.pt}
@@ -370,7 +385,7 @@ export interface TreeEmits {
      * Emitted when the selection keys change.
      * @param {TreeSelectionKeys} value - New selection keys.
      */
-    'update:selectionKeys'(event: TreeSelectionKeys): void;
+    'update:selectionKeys'(value: TreeSelectionKeys): void;
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNode} node - Node instance.
@@ -391,6 +406,11 @@ export interface TreeEmits {
      * @param {TreeNode} node - Node instance.
      */
     'node-collapse'(node: TreeNode): void;
+    /**
+     * Callback to invoke on filter input.
+     * @param {TreeFilterEvent} event - Custom filter event.
+     */
+    'filter'(event: TreeFilterEvent): void;
 }
 
 /**

components/lib/tree/Tree.spec.js

@@ -1,6 +1,4 @@
 import { mount } from '@vue/test-utils';
-import PrimeVue from 'primevue/config';
-import { nextTick } from 'vue';
 import Tree from './Tree.vue';
 
 describe('Tree.vue', () => {
@@ -42,4 +40,18 @@ describe('Tree.vue', () => {
 
         expect(wrapper.emitted('keydown')).toBeFalsy();
     });
+
+    it('emits update:filterValue on filter input', async () => {
+        wrapper = mount(Tree, {
+            props: {
+                filter: true,
+            },
+        });
+
+        let searchField = wrapper.find('input.p-tree-filter');
+
+        await searchField.trigger('keydown.space');
+
+        expect(wrapper.emitted('filter')).toBeTruthy();
+    })
 });

components/lib/tree/Tree.vue

@@ -48,7 +48,7 @@ import TreeNode from './TreeNode.vue';
 export default {
     name: 'Tree',
     extends: BaseTree,
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
+    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter'],
     data() {
         return {
             d_expandedKeys: this.expandedKeys || {},
@@ -167,6 +167,8 @@ export default {
             if (event.code === 'Enter') {
                 event.preventDefault();
             }
+
+            this.$emit('filter', { originalEvent: event, value: event.target.value });
         },
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {