Permalink
Browse files

fix #376 Issues in html TextInput widget

- Autoselection occurring even when the field already had focus
- Placeholder text in browsers that do not support the native implementation was selectable
  • Loading branch information...
1 parent 6439a05 commit 6a3de6263f51e0df1ede3719b9c0eb5561ed6478 @flongo flongo committed with Fabio Crisci Feb 11, 2013
Showing with 55 additions and 38 deletions.
  1. +40 −32 src/aria/html/TextInput.js
  2. +15 −6 test/aria/html/textinput/autoselect/AutoselectTestCase.js
View
@@ -57,22 +57,23 @@
}
/**
+ * Contains the codes for keys that do not correspond to a change of the value of the input field
+ * @type Array
+ * @private
+ */
+ var specialKeys = null;
+
+ /**
* Internal callback for placeholder handling on keydown.
* @param {aria.DomEvent} event keydown event
* @private
*/
function keyDownCallback (event) {
- // This is to remove the placeholder when the text input receives the first input char
- if (!_placeholderSupported && this._cfg.placeholder) {
- if (this._hasPlaceholder) {
- var domevent = aria.DomEvent;
- 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)) {
- this._removePlaceholder();
- } else {
- event.preventDefault();
- }
+ if (this._hasPlaceholder) {
+ if (!aria.utils.Array.contains(specialKeys, event.keyCode)) {
+ this._removePlaceholder();
+ } else {
+ event.preventDefault();
}
}
}
@@ -97,7 +98,6 @@
} else {
aria.utils.Json.setValue(bind.inside, bind.to, newValue, bind.cb);
}
-
this._firstFocus = true;
}
@@ -109,13 +109,12 @@
*/
function focusBinding (event) {
this._hasFocus = true;
-
- if (this._cfg.placeholder) {
- var cssClass = new aria.utils.ClassList(this._domElt);
- if (cssClass.contains('placeholder')) {
- aria.utils.Caret.setPosition(this._domElt, 0, 0);
- }
- cssClass.$dispose();
+ if (this._hasPlaceholder) {
+ aria.core.Timer.addCallback({
+ fn : this._setCaretForPlaceholder,
+ scope : this,
+ delay : 4
+ });
}
}
@@ -125,18 +124,10 @@
* @private
*/
function clickBinding (event) {
- if (this._cfg.autoselect) {
- if (!_placeholderSupported && this._cfg.placeholder) {
- var cssClass = new aria.utils.ClassList(this._domElt);
- if (cssClass.contains('placeholder')) {
- aria.utils.Caret.setPosition(this._domElt, 0, 0);
- } else {
- aria.utils.Caret.select(this._domElt);
- }
- cssClass.$dispose();
- } else {
- aria.utils.Caret.select(this._domElt);
- }
+ if (this._hasPlaceholder) {
+ aria.utils.Caret.setPosition(this._domElt, 0, 0);
+ } else if (this._cfg.autoselect) {
+ this._autoselect();
}
}
@@ -153,10 +144,15 @@
Aria.classDefinition({
$classpath : "aria.html.TextInput",
$extends : "aria.html.Element",
- $dependencies : ["aria.html.beans.TextInputCfg", "aria.utils.Caret"],
+ $dependencies : ["aria.html.beans.TextInputCfg", "aria.utils.Caret", "aria.DomEvent"],
$statics : {
INVALID_USAGE : "Widget %1 can only be used as a %2."
},
+ $onload : function () {
+ var domevent = aria.DomEvent;
+ specialKeys = [domevent.KC_END, domevent.KC_RIGHT, domevent.KC_ARROW_RIGHT, domevent.KC_DOWN,
+ domevent.KC_ARROW_DOWN, domevent.KC_DELETE, domevent.KC_BACKSPACE];
+ },
$constructor : function (cfg, context, line) {
this.$cfgBean = this.$cfgBean || "aria.html.beans.TextInputCfg.Properties";
@@ -321,6 +317,7 @@
aria.utils.Caret.setPosition(element, 0, 0);
}
this._hasPlaceholder = true;
+ this._domElt.unselectable = "on";
}
}
},
@@ -337,6 +334,7 @@
this._hasPlaceholder = false;
cssClass.remove('placeholder');
cssClass.$dispose();
+ this._domElt.unselectable = "off";
}
},
@@ -374,6 +372,16 @@
scope : this
});
}
+ },
+
+ /**
+ * Set the carrect at the beginning of the input field
+ * @protected
+ */
+ _setCaretForPlaceholder : function () {
+ if (this._hasPlaceholder) {
+ aria.utils.Caret.setPosition(this._domElt, 0, 0);
+ }
}
}
@@ -15,15 +15,11 @@
Aria.classDefinition({
$classpath : "test.aria.html.textinput.autoselect.AutoselectTestCase",
- $extends : "aria.jsunit.TemplateTestCase",
+ $extends : "aria.jsunit.RobotTestCase",
$dependencies : ["aria.html.TextInput", "aria.utils.SynEvents", "aria.utils.Dom"],
- $constructor : function () {
- this.$TemplateTestCase.constructor.call(this);
- this.element = null;
- },
$destructor : function () {
this.element = null;
- this.$TemplateTestCase.$destructor.call(this);
+ this.$RobotTestCase.$destructor.call(this);
},
$prototype : {
runTemplateTest : function () {
@@ -81,6 +77,19 @@ Aria.classDefinition({
this.assertEquals(caretPos.end, this.element.value.length, "The end pos of caret is not at the end of the word typed");
this.assertEquals(this.element.value, "brazil", "The value of input text is not brazil");
+ this.synEvent.click(this.element, {
+ fn : this.afterFourthClick,
+ scope : this
+ });
+ },
+
+ afterFourthClick : function () {
+
+ this.assertEquals(this.templateCtxt._tpl.data.click, 3, "Click callback set in the widget configuration has not been called");
+
+ var caretPos = aria.utils.Caret.getPosition(this.element);
+ this.assertEquals(caretPos.start - caretPos.end, 0, " After the second click the field is still completely selected");
+
aria.utils.SynEvents.click(this.secondElement, {
fn : this.afterFirstClickTwo,
scope : this

0 comments on commit 6a3de62

Please sign in to comment.