fix ariatemplates#288 placeholder not removed correctly after data mo…

…del changes
flongo · Dec 19, 2012 · b91b822 · b91b822
1 parent c05e6de
commit b91b822
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/aria/html/TextInput.js b/src/aria/html/TextInput.js
@@ -69,11 +69,7 @@
                 var specialKeys = [domevent.KC_END, domevent.KC_RIGHT, domevent.KC_ARROW_RIGHT, domevent.KC_DOWN,
                         domevent.KC_ARROW_DOWN, domevent.KC_DELETE, domevent.KC_BACKSPACE];
                 if (!aria.utils.Array.contains(specialKeys, event.keyCode)) {
-                    var cssClass = new aria.utils.ClassList(this._domElt);
-                    this._domElt.value = "";
-                    this._hasPlaceholder = false;
-                    cssClass.remove('placeholder');
-                    cssClass.$dispose();
+                    this._removePlaceholder();
                 } else {
                     event.preventDefault();
                 }
@@ -255,7 +251,11 @@
              */
             onbind : function (name, value, oldValue) {
                 if (name === "value") {
-                    this._domElt.value = (value != null) ? value : "";
+                    value = (value != null) ? value + "" : "";
+                    if (value) {
+                        this._removePlaceholder()
+                    }
+                    this._domElt.value = value;
                     this._setPlaceholder();
                 }
             },
@@ -338,6 +338,21 @@
                 }
             },
 
+            /**
+             * Remove the css class and value for placeholder if needed by browsers that don't support it natively.
+             * @protected
+             */
+            _removePlaceholder : function () {
+                if (this._hasPlaceholder) {
+                    var element = this._domElt;
+                    var cssClass = new aria.utils.ClassList(element);
+                    element.value = "";
+                    this._hasPlaceholder = false;
+                    cssClass.remove('placeholder');
+                    cssClass.$dispose();
+                }
+            },
+
             /**
              * Add special listeners on top of the ones specified in configuration.
              * @param {aria.html.beans.TextInputCfg.Properties} cfg Widget configuration.

diff --git a/test/aria/html/textinput/placeholder/PlaceholderTestCase.js b/test/aria/html/textinput/placeholder/PlaceholderTestCase.js
@@ -209,10 +209,14 @@ Aria.classDefinition({
         },
 
         _testWhenDataChangeToNull : function () {
-            aria.utils.Json.setValue(this.data, "arrival", "");
+            aria.utils.Json.setValue(this.data, "arrival", null);
             this.assertEquals(this.thirdElement.value, "Set arrival", "The placeholder is not displayed after nullifying the datamodel to which the widget is bound");
             this.assertTrue(this.cssClass3.contains("placeholder"), "Css class placeholder is not there");
 
+            aria.utils.Json.setValue(this.data, "arrival", "fake");
+            this.assertEquals(this.thirdElement.value, "fake", "The placeholder has not been removed");
+            this.assertFalse(this.cssClass3.contains("placeholder"), "Css class placeholder is not removed properly after bound data changes");
+
             this.end();
 
         }