Merge pull request #3998 from thielpa/fix-inputnumber

fix(TreeNode): stop keydown event propagation from content

components/lib/tree/Tree.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import { nextTick } from 'vue';
+import Tree from './Tree.vue';
+
+describe('Tree.vue', () => {
+    let wrapper;
+
+    beforeEach(async () => {
+        wrapper = mount(Tree, {
+            props: {
+                value: [
+                    {
+                        key: '0',
+                        label: 'Documents',
+                        data: 'Documents Folder',
+                        icon: 'pi pi-fw pi-inbox',
+                        children: []
+                    }
+                ]
+            },
+            slots: {
+                default: `<input data-tree-input />`
+            }
+        });
+    });
+
+    it('should exists', () => {
+        expect(wrapper.find('.p-tree.p-component').exists()).toBe(true);
+    });
+
+    it('triggers event', async () => {
+        wrapper.trigger('keydown.space');
+        expect(wrapper.emitted('keydown')).toBeTruthy();
+    });
+
+    it('stops event propagation from content', async () => {
+        // If the event propagation is not stopped from content, then inputs would not work as expected
+        let textInput = wrapper.find('input[data-tree-input]');
+
+        await textInput.trigger('keydown.space');
+
+        expect(wrapper.emitted('keydown')).toBeFalsy();
+    });
+});

components/lib/tree/TreeNode.vue

@@ -27,7 +27,7 @@
                 </div>
             </div>
             <span :class="cx('nodeIcon')" v-bind="getPTOptions('nodeIcon')"></span>
-            <span :class="cx('label')" v-bind="getPTOptions('label')">
+            <span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
                 <template v-else>{{ label(node) }}</template>
             </span>