combox added

css/lib/angucomplete/angucomplete-alt.css

@@ -10,15 +10,13 @@
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
-  width: 250px;
+  width: 100%;
   padding: 6px;
   cursor: pointer;
   z-index: 9999;
   position: absolute;
-  /*top: 32px;
+  top: 32px;
   left: 0px;
-  */
-  margin-top: -6px;
   background-color: #ffffff;
 }
 
@@ -39,7 +37,7 @@
 }
 
 .angucomplete-selected-row {
-  background-color: lightblue;
+  background-color: steelblue;
   color: #ffffff;
 }
 

js/controllers/website-controller.js

@@ -25,8 +25,8 @@ function handleFiles(ev) {
 window.document.body.addEventListener('change', handleFiles);
 
 app.controller('websiteCtrl', [
-  '$scope', '$q', 'Auth', 'azp@oauth3.org'
-, function ($scope, $q, Auth, Oauth3) {
+  '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
+, function ($scope, $q, Auth, Oauth3, $timeout) {
 
   var vm = this;
   vm.domains = [];
@@ -307,6 +307,18 @@ app.controller('websiteCtrl', [
   });
   vm.listSites();
 
+  vm.triggerDropdown = function() {
+    $timeout(function() {
+      var el = document.querySelector('.trigger-dropdown');
+      angular.element(el).triggerHandler('focus');
+    }, 0);
+  };
+
+  $scope.$watch('vm.selectedDomain', function(domainSelected) {
+    if (domainSelected !== undefined) {
+      vm.selectDomain(vm.selectedDomain.title);
+    }
+  });
 
   $scope.localDomainSearch = function(str, domain) {
     var matches = [];

templates/website.html

@@ -24,15 +24,23 @@
       </div>
       <span class="input-group-addon">.</span>
 
-      <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" />
+      <div angucomplete-alt
+        placeholder="Select a domain"
+        pause="300"
+        selected-object="vm.selectedDomain"
+        local-data="domain"
+        local-search="localDomainSearch"
+        title-field="domain"
+        minlength="0"
+        input-class="form-control trigger-dropdown"
+        match-class="highlight">
+      </div>
+
+      <!-- <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" /> -->
       <div class="input-group-btn">
-        <!-- Single button -->
         <div class="btn-group">
-          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
+          <button type="button" class="btn btn-default trigger-dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.triggerDropdown()"><span class="caret"></span>
           </button>
-          <ul class="dropdown-menu">
-            <li ng-repeat="domain in vm.domains track by $index"><button class="btn btn-link" ng-bind="domain.domain" ng-click="vm.selectDomain(domain)">example.com</button></li>
-          </ul>
         </div>
       </div>
 
@@ -81,18 +89,4 @@
       </tbody>
     </table>
   </div>
-
-</div>
-
-
-<div angucomplete-alt
-  placeholder="Select a domain"
-  pause="300"
-  selected-object="selectedDomain"
-  local-data="domain"
-  local-search="localDomainSearch"
-  title-field="domain"
-  minlength="0"
-  input-class="form-control form-control-small"
-  match-class="highlight">
 </div>