fix tooltip bug

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-dropdown",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "main": [
     "px-dropdown.html"
   ],

package.json

@@ -3,7 +3,7 @@
     "name": "px-dropdown",
     "author": "General Electric",
     "description": "A Px Dropdown component",
-    "version": "0.7.2",
+    "version": "0.7.3",
     "private": true,
     "extName" : null,
     "repository" :

px-dropdown-content.html

@@ -101,7 +101,8 @@
        */
       maxContCharacterWidth: {
         type: Number,
-        value: 0
+        value: 0,
+        observer: '_maxContCharacterWidthChanged'
       },
       /**
        * An attribute which specifies if the dropdown should extend in width
@@ -166,8 +167,8 @@
         value: false
       }
     },
-    attached: function() {
-      if (this.maxContCharacterWidth) {
+    _maxContCharacterWidthChanged: function(newValue) {
+      if(newValue) {
         this.fire('maxContCharacterWidth', {maxContCharacterWidth : this.maxContCharacterWidth});
       }
     },

px-dropdown-text.html

@@ -22,8 +22,8 @@
   <link rel="import" type="css" href="css/px-dropdown-text.css" />
   <template>
       <div id="textWrap" class="flex__item px-dropdown-text u-p--">{{displayValue}}</div>
-      <template is="dom-if" if="{{_includeTooltip(displayValue)}}">
-          <px-tooltip tooltip-message="{{displayValue}}" orientation="top"></px-tooltip>
+      <template is="dom-if" if="{{_includeTooltip(tooltipValue, maxContCharacterWidth)}}">
+          <px-tooltip tooltip-message="{{tooltipValue}}" orientation="top"></px-tooltip>
       </template>
   </template>
 </dom-module>
@@ -48,6 +48,21 @@
         value: ''
       },
       /**
+       * Text value used for the tooltip
+       *
+       * @property tooltipValue
+       * @type String
+       * @default ''
+       */
+      tooltipValue: {
+        type: String,
+        notify: true,
+        value: ''
+      },
+      /**
+       * The tooltip will be displayed if tooltipValue length is bigger than
+       * this attribute
+       *
        * @property maxContCharacterWidth
        * @type Number
        * @default 0
@@ -65,7 +80,7 @@
      * we need to display the tooltip or not.
      */
     _includeTooltip: function() {
-      return (this.displayValue.length > this.maxContCharacterWidth);
+      return (this.tooltipValue.length > this.maxContCharacterWidth);
     }
   });
 </script>

px-dropdown.html

@@ -33,7 +33,7 @@
     on-mouseout="_hoverOff"
     class$="{{_dropcellClass(opened, hover)}} flex"
     id="dropcell">
-      <px-dropdown-text display-value="{{displayValue}}" max-cont-character-width="{{_maxCharWidth}}"></px-dropdown-text>
+      <px-dropdown-text display-value="{{displayValue}}" max-cont-character-width="{{_maxCharWidth}}" tooltip-value={{value}}></px-dropdown-text>
       <template is="dom-if" if="{{_hideChevron(hideChevron)}}">
         <px-dropdown-chevron class="px-dropdown-chevron"></px-dropdown-chevron>
       </template>
@@ -156,18 +156,17 @@
         value: function() { return null;}
       },
       /**
-       * Reflects the currently selected value of the dropdown. This will mostly
-       * be the same as displayValue but is used internally
+       * reflects the actual value of the dropdown rather than the displayed one
+       * (the displayed one can be shortened for example)
+       *
        * @param value
        * @type string
        * @default ''
        */
       value: {
         type: String,
         value: '',
-        computed: '_computeValue(displayValue)',
-        notify: true,
-        readOnly: true
+        notify: true
       }
     },
     observers: [
@@ -187,6 +186,10 @@
       // We should be using only 'tap', but this would be a breaking change.
       var tapEvent = ('ontouchstart' in window) ? 'tap' : 'click';
       document.addEventListener(tapEvent, this._onCaptureClick.bind(this), true);
+
+      if(!this.value && this.displayValue) {
+        this.set('value', this.displayValue);
+      }
     },
     detached: function() {
       var tapEvent = ('ontouchstart' in window) ? 'tap' : 'click';
@@ -199,6 +202,7 @@
     *
     */
     _newTextValue: function(evt) {
+      this.set('value', evt.detail.textValue);
       this.set('displayValue',evt.detail.textValue);
       this.fire('change');