Skip to content
Browse files

fix #288 placeholder and bindings

When the placeholder was not set, bindings were broken.
Also, when setting the bound value to null, the placeholder was not being displayed.
  • Loading branch information...
1 parent ccb2b29 commit 6f7b18af24d999c2af4d05098de70352e12440c4 @piuccio piuccio committed with Dec 19, 2012
View
61 src/aria/html/TextInput.js
@@ -35,17 +35,6 @@
}
/**
- * Callback for handling placeholder after type.
- * @private
- */
- function setPlaceholderOnType () {
- // This is to display the placeholder when the text input value is empty
- if (!_placeholderSupported && this._cfg.placeholder) {
- this._setPlaceholder();
- }
- }
-
- /**
* Convert a keydown event into a type event. This is achieved adding a very short callback on keydown. The reason
* being the fact that on keydown the input has still the previous value. In the callback we'll see the correct text
* input value. This function should have the same scope as the widget instance.
@@ -105,16 +94,12 @@
this._hasFocus = false;
- if (this._cfg.placeholder) {
- if (!this._hasPlaceholder) {
- aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
- } else {
- aria.utils.Json.setValue(bind.inside, bind.to, "", bind.cb);
- }
- }
-
- if (!_placeholderSupported && this._cfg.placeholder) {
- this._setPlaceholder();
+ if (this._hasPlaceholder) {
+ // We're handling the placeholder. Set an empty string in the datamodel instead of the placeholder value
+ // Note that the placeholder is set by the type function, so we know the field must be empty
+ aria.utils.Json.setValue(bind.inside, bind.to, "", bind.cb);
+ } else {
+ aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
}
this._firstFocus = true;
@@ -184,7 +169,6 @@
cfg.attributes.type = (cfg.password) ? "password" : "text";
cfg.on = cfg.on || {};
-
_placeholderSupported = ("placeholder" in Aria.$window.document.createElement("input"));
if (cfg.placeholder && _placeholderSupported) {
cfg.attributes.placeholder = cfg.placeholder;
@@ -260,10 +244,7 @@
}
}
- var placeholder = this._cfg.placeholder;
- if (!_placeholderSupported && placeholder) {
- this._setPlaceholder();
- }
+ this._setPlaceholder();
},
/**
@@ -274,7 +255,8 @@
*/
onbind : function (name, value, oldValue) {
if (name === "value") {
- this._domElt.value = value;
+ this._domElt.value = (value != null) ? value : "";
+ this._setPlaceholder();
}
},
@@ -336,20 +318,23 @@
},
/**
- * Set the css class and value for placeholder. Used only in IE 6/7/8/9 and FF 3.6.
+ * Set the css class and value for placeholder if needed by browsers that don't support it natively. Used
+ * only in IE 6/7/8/9 and FF 3.6.
* @protected
*/
_setPlaceholder : function () {
- var element = this._domElt;
- if (element.value === "") {
- element.value = this._cfg.placeholder;
- var cssClass = new aria.utils.ClassList(element);
- cssClass.add('placeholder');
- cssClass.$dispose();
- if (this._hasFocus) {
- aria.utils.Caret.setPosition(element, 0, 0);
+ if (!_placeholderSupported && this._cfg.placeholder) {
+ var element = this._domElt;
+ if (element.value === "") {
+ element.value = this._cfg.placeholder;
+ var cssClass = new aria.utils.ClassList(element);
+ cssClass.add('placeholder');
+ cssClass.$dispose();
+ if (this._hasFocus) {
+ aria.utils.Caret.setPosition(element, 0, 0);
+ }
+ this._hasPlaceholder = true;
}
- this._hasPlaceholder = true;
}
},
@@ -384,7 +369,7 @@
});
this._chainListener(listeners, context, "type", {
- fn : setPlaceholderOnType,
+ fn : this._setPlaceholder,
scope : this
});
}
View
30 test/aria/html/textinput/placeholder/PlaceholderTestCase.js
@@ -21,16 +21,32 @@ Aria.classDefinition({
this.$TemplateTestCase.constructor.call(this);
this.element = null;
this.secondElement = null;
+ this.thirdElement = null;
this.cssClass = null;
this.cssClass2 = null;
+ this.cssClass3 = null;
this._placeholderSupported = null;
this._placeholderSupported = ("placeholder" in Aria.$window.document.createElement("input"));
+ this.data = {
+ location : '',
+ departure : '',
+ arrival : 'whatever',
+ click : 0,
+ clickNoAutoselect : 0
+ };
+
+ this.setTestEnv({
+ template : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTpl",
+ data : this.data
+ });
},
$destructor : function () {
this.element = null;
this.secondElement = null;
+ this.thirdElement = null;
this.cssClass.$dispose();
this.cssClass2.$dispose();
+ this.cssClass3.$dispose();
this._placeholderSupported = null;
this.$TemplateTestCase.$destructor.call(this);
},
@@ -40,8 +56,10 @@ Aria.classDefinition({
var inputs = document.getElementsByTagName("input");
this.element = inputs[0];
this.secondElement = inputs[1];
+ this.thirdElement = inputs[2];
this.cssClass = new aria.utils.ClassList(this.element);
this.cssClass2 = new aria.utils.ClassList(this.secondElement);
+ this.cssClass3 = new aria.utils.ClassList(this.thirdElement);
// Check that in IE6/7/8/9 and FF 3.6 there is the css class 'placeholder' and the value inside the text
// input and for the other browser check the attributes placeholder
@@ -185,7 +203,19 @@ Aria.classDefinition({
this.assertEquals(this.secondElement.value, "Support placeholder", "The placeholder is not displayed");
this.assertTrue(this.cssClass2.contains("placeholder"), "Css class placeholder is not there");
this.assertEquals(this.templateCtxt._tpl.data.departure, "", "The value inside the data model is not empty");
+
+ this._testWhenDataChangeToNull();
+
+ },
+
+ _testWhenDataChangeToNull : function () {
+ aria.utils.Json.setValue(this.data, "arrival", "");
+ 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");
+
this.end();
+
}
+
}
})
View
11 test/aria/html/textinput/placeholder/PlaceholderTestCaseTpl.tpl
@@ -57,6 +57,17 @@
}
}/}
+ {@html:TextInput {
+ id: "texttestTwo",
+ placeholder : "Set arrival",
+ bind : {
+ value: {
+ inside: data,
+ to: "arrival"
+ }
+ }
+ }/}
+
</div>
<div id="outsideDiv">&nbsp;</div>
View
8 test/aria/html/textinput/placeholder/PlaceholderTestCaseTplScript.js
@@ -16,14 +16,6 @@
Aria.tplScriptDefinition({
$classpath : "test.aria.html.textinput.placeholder.PlaceholderTestCaseTplScript",
$prototype : {
- $dataReady : function () {
- this.data = {
- location : '',
- departure : '',
- click : 0,
- clickNoAutoselect : 0
- };
- },
textType : function (value) {
return;

0 comments on commit 6f7b18a

Please sign in to comment.
Something went wrong with that request. Please try again.