From 2603b7a1405d42283e78a54333e7a0e3bf3b3d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Ro=CC=88ttgen?= <maximilian.roettgen@adesso.de>
Date: Thu, 23 Nov 2023 16:48:14 +0100
Subject: [PATCH] Add 'filter'-event to Tree.vue

---
 components/lib/tree/Tree.d.ts    | 22 +++++++++++++++++++++-
 components/lib/tree/Tree.spec.js | 16 ++++++++++++++--
 components/lib/tree/Tree.vue     |  4 +++-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index e10178ff2d..f25ade0e63 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -120,6 +120,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}
@@ -424,7 +439,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.
@@ -445,6 +460,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;
 }
 
 /**
diff --git a/components/lib/tree/Tree.spec.js b/components/lib/tree/Tree.spec.js
index dbeeec9344..cb43cf5532 100644
--- a/components/lib/tree/Tree.spec.js
+++ b/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();
+    })
 });
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index 4d061c7b7f..78ea7445f4 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -47,7 +47,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 || {},
@@ -166,6 +166,8 @@ export default {
             if (event.code === 'Enter') {
                 event.preventDefault();
             }
+
+            this.$emit('filter', { originalEvent: event, value: event.target.value });
         },
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {