From cc1f65b901240daa3a8197ca988e3c7907c97b90 Mon Sep 17 00:00:00 2001
From: Chris Jackson <chris@cd-jackson.com>
Date: Sun, 22 May 2016 17:29:28 +0100
Subject: [PATCH] fix(Things): Fixed freeform combobox editor

Signed-off-by: Chris Jackson <chris@cd-jackson.com>
---
 src/app/configuration/eshConfigParam.tpl.html | 24 +++++--------
 src/app/configuration/thingConfig.js          |  2 +-
 src/common/combobox.js                        | 36 +++++++++++++++++--
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/app/configuration/eshConfigParam.tpl.html b/src/app/configuration/eshConfigParam.tpl.html
index b42e75b2..58d8b14c 100644
--- a/src/app/configuration/eshConfigParam.tpl.html
+++ b/src/app/configuration/eshConfigParam.tpl.html
@@ -14,8 +14,7 @@
                search-enabled="false"
                multiple
                limit="config.multipleLimit"
-               ng-disabled="config.readOnly"
-            >
+               ng-disabled="config.readOnly">
         <ui-select-match>
             {{$item.label}}
         </ui-select-match>
@@ -46,25 +45,20 @@
 
 <div ng-if="config.options!=null && config.options.length!=0 && config.multiple!=true && config.limitToOptions==false">
     <!-- Single select dropdown, but allowing other entries -->
-
-    <!-- since this doesn't work - use an input box -->
-    <bootstrap-combo
-           name="{{config.name}}"
-           ng-dirty ng-required="{{config.required}}"
-           id="CONFIGLABEL-{{cfgType}}-{{config.name}}"
-           ng-model="cfgModel"
-           data-dropdown-data="config.options"
-            >
+    <bootstrap-combo id="CONFIGLABEL-{{cfgType}}-{{config.name}}"
+                     name="{{config.name}}"
+                     ng-dirty ng-required="{{config.required}}"
+                     ng-model="cfgModel"
+                     data-dropdown-data="config.options">
 </div>
 
 <div ng-if="config.options==null || config.options.length==0">
-    <input config-parameter="{{config}}"
+    <input id="CONFIGLABEL-{{cfgType}}-{{config.name}}"
+           config-parameter="{{config}}"
            class="form-control"
            name="{{config.name}}"
            ng-dirty ng-required="{{config.required}}"
-           id="CONFIGLABEL-{{cfgType}}-{{config.name}}"
-           ng-model="cfgModel"
-            >
+           ng-model="cfgModel">
 </div>
 
 <p class="help-block single-line" ng-hide="config.description==null || config.description.length==0">
diff --git a/src/app/configuration/thingConfig.js b/src/app/configuration/thingConfig.js
index d5b94d5a..f5647c33 100644
--- a/src/app/configuration/thingConfig.js
+++ b/src/app/configuration/thingConfig.js
@@ -661,7 +661,7 @@ angular.module('Config.Things', [
         $scope.thingSave = function () {
             var promises = [];
 
-            // Check if anything at thing level needs updating
+            // Check if anything at thing level needs updating (ie Channel Configuration)
             var thingUpdated = false;
             var updatedThing = {};
             if ($scope.thingConfigForm.modifiedChildFormsCount !== 0) {
diff --git a/src/common/combobox.js b/src/common/combobox.js
index 56c1195d..290b7873 100644
--- a/src/common/combobox.js
+++ b/src/common/combobox.js
@@ -12,21 +12,51 @@ angular.module('bootstrapCombo', [
     .directive('bootstrapCombo', function ($compile) {
         return {
             restrict: 'E',
+            require: "ngModel",
             scope: {
                 items: '=dropdownData',
                 selectedItem: '=preselectedItem',
                 ngModel: '=',
                 placeholder: '@'
             },
-            link: function (scope, element, attrs) {
+            link: function (scope, element, attrs,ngModel) {
+                scope.value = scope.ngModel;
+                for(var item in scope.items) {
+                    if(scope.items[item].value == parseInt(scope.ngModel)) {
+                        scope.value = scope.items[item].label;
+                        break;
+                    }
+                }
 
                 scope.selectVal = function (item) {
-                    scope.ngModel = item.value;
+                    scope.value = item.label;
+                    ngModel.$setViewValue(item.value);
                 };
 
+                ngModel.$render = function() {
+                    var value = ngModel.$viewValue;
+                    for(var item in scope.items) {
+                        if(scope.items[item].value == parseInt(ngModel.$viewValue)) {
+                            value = scope.items[item].label;
+                            break;
+                        }
+                    }
+                    scope.value = value;
+                };
+
+                scope.$watch("value", function() {
+                    for(var item in scope.items) {
+                        if(scope.items[item].label == scope.value) {
+                            ngModel.$setViewValue(scope.items[item].value);
+                            return;
+                        }
+                    }
+                    ngModel.$setViewValue(scope.value);
+                });
+
                 var html = '';
                 html += '  <div class="input-group">';
-                html += '    <input class="form-control" type="text" data-ng-model ="ngModel" data-ng-attr-placeholder="{{placeholder}}" />';
+                html += '    <input class="form-control" type="text" ng-model="value" ng-attr-placeholder="{{placeholder}}" />';
                 html += '    <div class="input-group-btn" data-ng-if="items.length">';
                 html += '      <div class="btn-group ">';
                 html += '        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >';