I am trying to have a filter on a tree, that will expand a parent node if it's child node is a match. Currently, if all nodes are expanded, the filter will act correctly. As soon as all nodes are collapsed, the filter has no functionality.
For example, with all nodes expanded, if I type, say Kevin, then only the associated parent nodes will be expanded, all others will be collapsed. On the other hand, with all nodes collapsed, if I type Kevin, then no nodes get expanded.
BUT! here is the kicker; if I were to type 'kevv', the result is no nodes expanded. On removing the second 'v', the kevin node is then expanded along with all associated parent nodes.
I through this plunk together just to demonstrate the functionality behind my real app so I apologize for the lack of styling.
Here is my Plunk
<ul ui-tree-nodes="" ng-model="data">
<li ng-repeat="item in data" ui-tree-node="" collapsed="!treeFilter(item, pattern, supportedFields)" ng-include="(item.items) ? 'parent_items_renderer' : 'terminal_item_renderer' "></li>
</ul>
<script type="text/ng-template" id="parent_items_renderer">
<div ui-tree-handle class="tree-node tree-node-content">
<a href="">
<div class="" ng-if="item.items" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{
'glyphicon-chevron-right closed': collapsed,
'glyphicon-chevron-down open': !collapsed}">
</span>
<span class="" ng-bind-html="item.title | highlight:pattern | trust"> {{item.title}}</span>
</div>
</a>
</div>
<ul ui-tree-nodes ng-model="item.items" ng-class="{hidden: collapsed}" >
<li ng-repeat="item in item.items" ui-tree-node ng-init="collapse()" collapsed="!treeFilter(item, pattern, supportedFields)" ng-include="(item.items) ? 'parent_items_renderer' : 'terminal_item_renderer' "> </li>
</ul>
</script>
<script type="text/ng-template" id="terminal_item_renderer">
<div ui-tree-handle class="tree-node tree-node-content">
<a href="">
<span></span>
<div ng-if="!item.items" class="item outcome">
<span ng-bind-html="item.title | highlight:pattern | trust ">{{item.title}}</span>
</div>
</a>
</div>