EasyUI Combo Tree does not work with the down arrow key

[Surender Kherwa]

EasyUI Combo Tree does not work with the down arrow key. When we select the combo tree and try to navigate though tree option using the down arrow key from keyborad it is not working.

Tried adding:  data-options="selectOnNavigation:false" but with no luck.

Is there any other way I can get the down arrow key to navigate to the combotree list?

[stworthy]

You will have to extend the keyboard navigation functionality on combotree component. Here is the simple implementation of doing so.

Code:

(function(){
	$.extend($.fn.combotree.methods,{
		nav:function(jq,dir){
			return jq.each(function(){
				var opts = $(this).combotree('options');
				var t = $(this).combotree('tree');
				var nodes = t.tree('getChildren');
				if (!nodes.length){return}
				var node = t.tree('getSelected');
				if (!node){
					t.tree('select', dir>0 ? nodes[0].target : nodes[nodes.length-1].target);
				} else {
					var index = 0;
					for(var i=0; i<nodes.length; i++){
						if (nodes[i].target == node.target){
							index = i;
							break;
						}
					}
					if (dir>0){
						while (index < nodes.length-1){
							index++;
							if ($(nodes[index].target).is(':visible')){break}
						}
					} else {
						while (index > 0){
							index--;
							if ($(nodes[index].target).is(':visible')){break}
						}
					}
					t.tree('select',nodes[index].target);
				}
				if (opts.selectOnNavigation){
					var node = t.tree('getSelected');
					$(node.target).trigger('click');
					$(this).combotree('showPanel');
				}
			});
		}
	});
	$.extend($.fn.combotree.defaults.keyHandler,{
		up:function(){
			$(this).combotree('nav',-1);
		},
		down:function(){
			$(this).combotree('nav',1);
		},
		enter:function(){
			var t = $(this).combotree('tree');
			var node = t.tree('getSelected');
			if (node){
				$(node.target).trigger('click');
			}
			$(this).combotree('hidePanel');
		}
	});
})(jQuery);