I have need to override tab order (tabindex) value for the fuelux tree.
Page contents in order:
-Fuelux tree (with multiple items, and branched items as well)
-Component X
Now if I set any tabindex value (even max value 32767) to the component X, that component X will get the tab focus as first item on the page. Instead the fuelux tree should get it first.
How the right order could be made?
Some example (you can change the button to be any other component - I'm interested about the tab order setting principle of the tree here):
<div class="fuelux menu-tree">
<ul id="myTreeVerticalNav" class="tree" role="tree">
<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
<div class="tree-branch-header">
<a href="#" class="tree-branch-name">
<span class="glyphicon icon-caret glyphicon-play"></span>
<span class="glyphicon icon-folder glyphicon-folder-close"></span>
<span class="tree-label"></span>
</a>
</div>
<ul class="tree-branch-children" role="group"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<li class="tree-item hide" data-template="treeitem" role="treeitem">
<a href="#" class="tree-item-name" target="_self">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label"></span>
</a>
</li>
</ul>
</div>
<button class="btn btn-standard">Component X</button>
You should be able to add tabindex attribute values to your tree item nodes by adding a key to the attr object in datasource. See here for documentation: http://getfuelux.com/javascript.html#tree-usage-datasource
And here is a CodePen I made to show how to add tab index to tree items: http://codepen.io/anon/pen/aNZPEw?editors=0010