change to manual transclude in drop-down-list for proper position of search input

Author: alannesta

app/scripts/directives/dropdown-list.html

@@ -1,8 +1,10 @@
 <div class="acq-dropdown-list dropdown" ng-class="{open: $select.open}">
+	<div class="acq-dropdown-selected"></div>	
 	<input type="text" autocomplete="off"
          class="ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
          ng-show="$select.searchEnabled && $select.open && $select.exceedThreshold">
+    <div class="acq-dropdown-item"></div>
 </div>
 

app/scripts/directives/dropdown-list.js

@@ -30,6 +30,7 @@
         // scope.users = [];   // shaded, prototypical inheritance
         var $select = ctrls[0];
         var ngModel = ctrls[1];
+
         var searchInput = element.querySelectorAll('input.ui-select-search');
 
         //From view --> model
@@ -79,10 +80,15 @@
           $select.selected = ngModel.$viewValue;
         };
 
+
+        element.on('focus', function(){
+          console.log('focus event on dropdown-list')
+        });
 
         // handle key press
         element.on('keydown', function(e) {
           var key = e.which;
+          console.log('key event on dropdown-list');
           scope.$apply(function() {
             var processed = false;
             if (!processed && $select.items.length > 0) {
@@ -173,21 +179,22 @@
           // var transcludedElement = clone.filter('.my-class')
           // instead of creating a hackish DOM element:
           // debugger;
-          element.append(clone);
-          // debugger;
-          // var transcludedMatch = transcluded.querySelectorAll('.ui-select-match');
+          // element.append(clone);
+          var transcluded = angular.element('<div>').append(clone);
+          var transcludedMatch = transcluded.querySelectorAll('.acq-dropdown-selected');
+          
           // transcludedMatch.removeAttr('ui-select-match'); //To avoid loop in case directive as attr
-          // //if (transcludedMatch.length !== 1) {
-          // //  throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length);
-          // //}
-          // element.querySelectorAll('.ui-select-match').replaceWith(transcludedMatch);
+          //if (transcludedMatch.length !== 1) {
+          //  throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length);
+          //}
+          element.querySelectorAll('.acq-dropdown-selected').replaceWith(transcludedMatch);
 
-          // var transcludedChoices = transcluded.querySelectorAll('.ui-select-choices');
+          var transcludedChoices = transcluded.querySelectorAll('.acq-dropdown-item');
           // transcludedChoices.removeAttr('ui-select-choices'); //To avoid loop in case directive as attr
-          // //if (transcludedChoices.length !== 1) {
-          // //  throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
-          // //}
-          // element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
+          //if (transcludedChoices.length !== 1) {
+          //  throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
+          //}
+          element.querySelectorAll('.acq-dropdown-item').replaceWith(transcludedChoices);
         });
         // debugger;
 

app/scripts/directives/dropdown-selected.html

@@ -1,7 +1,6 @@
 <button type="button" class="form-control acq-dropdown-selected"
         ng-disabled="$select.disabled"
-        ng-click="$select.activate()"
-        ng-hide="$select.open">
+        ng-click="$select.activate()">
   <span ng-show="$select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
   <!-- transclusion here --> 
   <span ng-hide="$select.isEmpty()" ng-transclude></span>