<div class="expandableSelector" piwik-focus-anywhere-but-here="formField.showSelect  = false">
    <div ng-click="formField.showSelect = !formField.showSelect" class="select-wrapper">
        <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
        <input type="text" class="select-dropdown"
                                            readonly="true" value="{{ formField.title }}">
    </div>

    <div ng-show="formField.showSelect" class="expandableList z-depth-2">

        <div class="searchContainer">
            <input type="text" placeholder="Search"
                   ng-model="formField.searchTerm" class="expandableSearch browser-default"
                   piwik-focus-if="formField.showSelect">
        </div>
        <ul class="collection firstLevel">
            <li ng-repeat="options in formField.availableOptions" class="collection-item" ng-show="options.values|filter:formField.searchTerm|length">
                <h4 class="expandableListCategory" ng-click="formField.showCategory == options.group ? formField.showCategory = '' : formField.showCategory = options.group">{{ options.group }} <span class="secondary-content" ng-class='{"icon-arrow-right": formField.showCategory != options.group, "icon-arrow-bottom": formField.showCategory == options.group}'></span></h4>

                <ul ng-show="formField.showCategory == options.group || formField.searchTerm" class="collection secondLevel">
                    <li class="expandableListItem collection-item valign-wrapper" ng-repeat="children in options.values|filter:formField.searchTerm" ng-click="formField.value = children.key;formField.showSelect = false;"><span class="primary-content">{{ children.value }}</span> <span ng-show="children.tooltip" title="{{ children.tooltip }}" class="secondary-content icon-help"></span></li>
                </ul>
            </li>
        </ul>
    </div>
</div>