diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
index f449f9ae3..b1a896b45 100644
--- a/api-generator/components/treeselect.js
+++ b/api-generator/components/treeselect.js
@@ -41,12 +41,6 @@ const TreeSelectProps = [
default: "null",
description: "Identifier of the underlying input element."
},
- {
- name: "ariaLabelledBy",
- type: "string",
- default: "null",
- description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
- },
{
name: "selectionMode",
type: "string",
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index d7babe546..925e44c91 100755
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -10,9 +10,9 @@
@keydown="onFilterKeydown" v-model="filterValue" />
-
-
-
+
@@ -79,6 +79,10 @@ export default {
scrollHeight: {
type: String,
default: null
+ },
+ level: {
+ type: Number,
+ default: 0
}
},
data() {
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index d36dcc1f4..ffcb9bd5a 100755
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -1,5 +1,6 @@
- -
+
-
-
@@ -52,6 +53,14 @@ export default {
templates: {
type: null,
default: null
+ },
+ level: {
+ type: Number,
+ default: null
+ },
+ index: {
+ type: Number,
+ default: null
}
},
nodeTouched: false,
@@ -92,9 +101,8 @@ export default {
onKeyDown(event) {
const nodeElement = event.target.parentElement;
- switch (event.which) {
- //down arrow
- case 40:
+ switch (event.code) {
+ case 'ArrowDown':
var listElement = nodeElement.children[1];
if (listElement) {
this.focusNode(listElement.children[0]);
@@ -111,12 +119,9 @@ export default {
}
}
}
-
- event.preventDefault();
break;
- //up arrow
- case 38:
+ case 'ArrowUp':
if (nodeElement.previousElementSibling) {
this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
}
@@ -126,28 +131,24 @@ export default {
this.focusNode(parentNodeElement);
}
}
-
- event.preventDefault();
break;
- //right-left arrows
- case 37:
- case 39:
+ case 'ArrowRight':
+ case 'ArrowLeft':
this.$emit('node-toggle', this.node);
-
- event.preventDefault();
break;
- //enter
- case 13:
+ case 'Enter':
+ case 'Space':
this.onClick(event);
- event.preventDefault();
break;
default:
//no op
break;
}
+
+ event.preventDefault();
},
toggleCheckbox() {
let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
diff --git a/src/components/treeselect/TreeSelect.d.ts b/src/components/treeselect/TreeSelect.d.ts
index 4d6428097..77c28239c 100644
--- a/src/components/treeselect/TreeSelect.d.ts
+++ b/src/components/treeselect/TreeSelect.d.ts
@@ -38,10 +38,6 @@ export interface TreeSelectProps {
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
- /**
- * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
- */
- ariaLabelledBy?: string | undefined;
/**
* Defines the selection mode.
* @see TreeSelectSelectionModeType
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index 04558d5f8..f9d041654 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/src/components/treeselect/TreeSelect.vue
@@ -1,8 +1,8 @@
-
+
-
+
@@ -29,10 +29,10 @@
-
+ @node-select="onNodeSelect" @node-unselect="onNodeUnselect" :level="0" />
{{emptyMessageText}}
@@ -45,7 +45,7 @@