Merge branch 'refs/heads/dom-architecture-master' into Dom-Architecture

39 files changed, 2651 insertions, 2076 deletions

diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
index 0ce1ab85..c9cbca74 100644
--- a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
+++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
@@ -54,6 +54,15 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         value: null
     },
 
+    /**
+    * If the delegate returns Objects, this property can be used to derive the
+    * display string for an object. If this property is not provided, the results
+    * provided by the delegate are assumed to be String.
+    */
+    textPropertyPath: {
+        value: null
+    },
+
     separator: {
         value: ',',
         distinct: true
@@ -112,42 +121,40 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
             // get the entered text after the separator
             var value = this._value;
 
+            if(value) {
+                var arr = value.split(this.separator).map(function(item) {
+                    return item.trim();
+                });
+                this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr);
+                this._tokens = value.split(this.separator).map(function(item) {
+                    return item.trim();
+                });
+            } else {
+                this.activeTokenIndex = 0;
+                this._tokens = [];
+            }
 
             if(fromInput) {
                 this._valueSyncedWithInputField = true;
-                if(value) {
-                    var arr = value.split(this.separator).map(function(item) {
-                        return item.trim();
-                    });
-                    this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr);
-                    this._tokens = value.split(this.separator).map(function(item) {
-                        return item.trim();
-                    });
-                    if(this._tokens.length && this._tokens.length > 0) {
-                        var searchTerm = this._tokens[this.activeTokenIndex];
-                        searchTerm = searchTerm ? searchTerm.trim() : '';
-                        if(searchTerm.length >= this.minLength) {
-                            var self = this;
-                            clearTimeout(this.delayTimer);
-                            this.delayTimer = setTimeout(function() {
-                                self.delayTimer = null;
-                                if (logger.isDebug) {
-                                    logger.debug('SEARCH for ', searchTerm);
-                                }
-                                self.performSearch(searchTerm);
-                            }, this.delay);
-                        } else {
-                            this.showPopup = false;
-                        }
-                    } else {
-                        this.showPopup = false;
+                this.showPopup = false;
+                if(this._tokens.length && this._tokens.length > 0) {
+                    var searchTerm = this._tokens[this.activeTokenIndex];
+                    searchTerm = searchTerm ? searchTerm.trim() : '';
+                    if(searchTerm.length >= this.minLength) {
+                        var self = this;
+                        clearTimeout(this.delayTimer);
+                        this.delayTimer = setTimeout(function() {
+                            self.delayTimer = null;
+                            if (logger.isDebug) {
+                                logger.debug('SEARCH for ', searchTerm);
+                            }
+                            self.performSearch(searchTerm);
+                        }, this.delay);
                     }
                 }
+
             } else {
-                this.activeTokenIndex = 0;
-                this._tokens = [];
                 this.showPopup = false;
-
                 this._valueSyncedWithInputField = false;
                 this.needsDraw = true;
             }
@@ -239,11 +246,24 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         get: function() {
             return this._suggestedValue;
         },
-        set: function(value) {
-            if(value) {
-                this._suggestedValue = value;
-                var arr = this.tokens;
-                arr[this.activeTokenIndex] = this._suggestedValue;
+        set: function(aValue) {
+            this._suggestedValue = aValue;
+            if(aValue) {
+
+                var arr = this.tokens || [];
+                var token;
+
+                if(String.isString(aValue)) {
+                    token = aValue;
+                } else {
+                    if(this.textPropertyPath) {
+                        token = aValue[this.textPropertyPath];
+                    } else {
+                        token = '';
+                    }
+                }
+
+                arr[this.activeTokenIndex] = token;
                 this.tokens = arr;
                 this.showPopup = false;
             }
@@ -283,6 +303,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
             if (logger.isDebug) {
                 logger.debug('got suggestions: ', value);
             }
+
             this.loadingStatus = 'complete';
             this._suggestions = value;
             this.showPopup = (value && value.length > 0);
@@ -305,19 +326,12 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         enumerable: false,