Treeview Examples: Make Right Arrow Move Focus to First Child (Pull #390)

For issue #385, changed right arrow behavior so that when focus is on an expanded parent node, pressing right arrow moves focus to the first child of that parent.

Author: jongund

examples/treeview/treeview-1/js/treeitem.js

@@ -132,7 +132,9 @@ Treeitem.prototype.handleKeydown = function (event) {
   }
 
   if (event.shift) {
-    printableCharacter(this);
+    if (isPrintableCharacter(char)) {
+      printableCharacter(this);
+    }
   }
   else {
     switch (event.keyCode) {
@@ -170,9 +172,14 @@ Treeitem.prototype.handleKeydown = function (event) {
 
       case this.keyCode.RIGHT:
         if (this.isExpandable) {
-          this.tree.expandTreeitem(this);
-          flag = true;
+          if (this.isExpanded()) {
+            this.tree.setFocusToNextItem(this);
+          }
+          else {
+            this.tree.expandTreeitem(this);
+          }
         }
+        flag = true;
         break;
 
       case this.keyCode.LEFT:
@@ -199,7 +206,9 @@ Treeitem.prototype.handleKeydown = function (event) {
         break;
 
       default:
-        printableCharacter(this);
+        if (isPrintableCharacter(char)) {
+          printableCharacter(this);
+        }
         break;
     }
 

examples/treeview/treeview-2/js/treeitemLinks.js

@@ -143,7 +143,9 @@ TreeitemLink.prototype.handleKeydown = function (event) {
       this.stopDefaultClick = true;
     }
     else {
-      printableCharacter(this);
+      if (isPrintableCharacter(char)) {
+        printableCharacter(this);
+      }
     }
   }
   else {
@@ -177,9 +179,14 @@ TreeitemLink.prototype.handleKeydown = function (event) {
 
       case this.keyCode.RIGHT:
         if (this.isExpandable) {
-          this.tree.expandTreeitem(this);
-          flag = true;
+          if (this.isExpanded()) {
+            this.tree.setFocusToNextItem(this);
+          }
+          else {
+            this.tree.expandTreeitem(this);
+          }
         }
+        flag = true;
         break;
 
       case this.keyCode.LEFT:
@@ -206,7 +213,9 @@ TreeitemLink.prototype.handleKeydown = function (event) {
         break;
 
       default:
-        printableCharacter(this);
+        if (isPrintableCharacter(char)) {
+          printableCharacter(this);
+        }
         break;
     }
   }