Merge pull request #2692 from bryan-m-hughes/timob-8212

[TIMOB-8212] Updated textfield/area to fix a ton of bugs.

mobileweb/themes/common.css

@@ -401,17 +401,28 @@ textarea {
 	max-height: 100%;
 }
 
-.TiUITextFieldBorderStyleNone input,
-.TiUITextFieldBorderStyleLine input {
+/* note: do NOT add position:absolute to this style under ANY circumstances. It will break text field on WebKit */
+.TiUITextFieldInput {
 	background: transparent;
-	border: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+.TiUITextFieldBorderStyleNone {
+	border: none;
 }
 
 .TiUITextFieldBorderStyleLine {
 	border: solid 1px #000;
 }
 
-.TiUITextFieldBorderStyleRounded input {
+.TiUITextFieldBorderStyleBezel {
+	border: inset 2px;
+}
+
+.TiUITextFieldBorderStyleRounded {
+	border: solid 1px #000;
 	border-radius: 5px;
 }
 

mobileweb/titanium/Ti/UI/TableView.js

@@ -363,18 +363,13 @@ define(["Ti/_/declare", "Ti/_/UI/KineticScrollView", "Ti/_/style", "Ti/_/lang",
 							if (value[i].declaredClass === "Ti.UI.TableViewRow") {
 								// Check if we need a default section
 								if (!this._currentSection) {
-									this.appendSection(UI.createTableViewSection({_tableView: this}));
-									this._sections._add();
-									this.sections.push(this._currentSection);
-									this._sections._add(this._createSeparator());
+									this.appendSection(this._currentSection = UI.createTableViewSection({_tableView: this}));
 									retval.push(this._currentSection);
 								}
 								this._currentSection.add(value[i]); // We call the normal .add() method to hook into the sections proper add mechanism
 							} else if (value[i].declaredClass === "Ti.UI.TableViewSection") {
 								value[i]._tableView = this;
-								this._sections._add(this._currentSection = value[i]);
-								this._sections._add(this._createSeparator());
-								this.sections.push(this._currentSection);
+								this.appendSection(this._currentSection = value[i]);
 								retval.push(this._currentSection);
 							}
 							this._publish(value[i]);

mobileweb/titanium/Ti/UI/TextArea.js

@@ -4,19 +4,12 @@ define(["Ti/_/declare", "Ti/_/UI/TextBox", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
 	return declare("Ti.UI.TextArea", TextBox, {
 
 		constructor: function(args) {
-			this._field = this._fieldWrapper = dom.create("textarea", {
+			var field = dom.create("textarea", {
 				autocomplete: "off",
-				style: {
-					backgroundColor: "transparent",
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: 0,
-					bottom: 0
-				}
+				className: "TiUITextFieldInput"
 			}, this.domNode);
 
-			this._initTextBox();
+			this._initTextBox(field);
 		},
 
 		_defaultWidth: UI.SIZE,

mobileweb/titanium/Ti/UI/TextField.js

@@ -1,36 +1,27 @@
 define(["Ti/_/declare", "Ti/_/UI/TextBox", "Ti/_/css", "Ti/_/dom", "Ti/_/lang", "Ti/_/style", "Ti/UI"],
 	function(declare, TextBox, css, dom, lang, style, UI) {
 
-	var borderStyles = ["None", "Line", "Bezel", "Rounded"];
+	var borderStyles = ["None", "Line", "Bezel", "Rounded"],
+		keyboardPost = {
+			post: "_setKeyboardType"
+		},
+		setStyle = style.set;
 
 	return declare("Ti.UI.TextField", TextBox, {
 
 		constructor: function(args) {
-			var f = this._field = dom.create("input", {
+			// note: do NOT add position:absolute to this style under ANY circumstances. It will break text field on WebKit
+			var field = dom.create("input", {
 				autocomplete: "off",
-				style: {
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: 0,
-					bottom: 0
-				}
-			}, this._fieldWrapper = dom.create("span", {
-				style: {
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: 0,
-					bottom: 0
-				}
-			}, this.domNode));
+				className: "TiUITextFieldInput"
+			}, this.domNode);
 
-			this._initTextBox();
-			this._keyboardType();
+			this._initTextBox(field);
+			this._setKeyboardType();
 			this.borderStyle = UI.INPUT_BORDERSTYLE_BEZEL;
 
-			this._disconnectFocusEvent = require.on(f, "focus", this, function() {
-				this.clearOnEdit && (f.value = "");
+			this._disconnectFocusEvent = require.on(field, "focus", this, function() {
+				this.clearOnEdit && (field.value = "");
 			});
 		},
 
@@ -51,31 +42,35 @@ define(["Ti/_/declare", "Ti/_/UI/TextBox", "Ti/_/css", "Ti/_/dom", "Ti/_/lang",
 		},
 
 		_setTouchEnabled: function(value) {
-			this.slider && style.set(this._field, "pointerEvents", value ? "auto" : "none");
+			this.slider && setStyle(this._field, "pointerEvents", value ? "auto" : "none");
 		},
 
-		_keyboardType: function(args) {
-			var t = "text",
-				args = args || {};
-			if (lang.val(args.pm, this.passwordMask)) {
-				t = "password";
+		_setKeyboardType: function() {
+			var type = "text";
+			if (this.passwordMask) {
+				type = "password";
 			} else {
-				switch (lang.val(args.kt, this.keyboardType)) {
+				switch (this.keyboardType) {
 					case UI.KEYBOARD_EMAIL:
-						t = "email";
+						type = "email";
 						break;
 					case UI.KEYBOARD_NUMBER_PAD:
-						t = "number";
+						type = "number";
 						break;
 					case UI.KEYBOARD_PHONE_PAD:
-						t = "tel";
+						type = "tel";
 						break;
 					case UI.KEYBOARD_URL:
-						t = "url";
+						type = "url";
 						break;
 				}
 			}
-			this._field.type = t;
+			// Note: IE9 throws an exception if you don't set an input type it supports
+			try {
+				this._field.type = type;
+			} catch(e) {
+				this._field.type = "text";
+			}
 		},
 
 		properties: {
@@ -97,33 +92,16 @@ define(["Ti/_/declare", "Ti/_/UI/TextBox", "Ti/_/css", "Ti/_/dom", "Ti/_/lang",
 
 			hintText: {
 				set: function(value) {
-					this._field.placeholder = value;
+					try { // IE9 doesn't support placeholder and throws an exception if you try and set it.
+						this._field.placeholder = value;
+					} catch(e) {}
 					return value;
 				}
 			},
 
-			keyboardType: {
-				set: function(value) {
-					this._keyboardType({ kt:value });
-					return value;
-				}
-			},
+			keyboardType: keyboardPost,
 
-			maxLength: {
-				set: function(value) {
-					value = Math.min(value|0, 0);
-					dom.attr[value > 0 ? "set" : "remove"](this._field, "maxlength", value);
-					return value;
-				}
-			},
-
-			passwordMask: {
-				value: false,
-				set: function(value) {
-					this._keyboardType({ pm:value });
-					return value;
-				}
-			}
+			passwordMask: keyboardPost
 		}
 
 	});

mobileweb/titanium/Ti/_/UI/TextBox.js

@@ -15,11 +15,10 @@ define(
 
 		_preventDefaultTouchEvent: false,
 
-		_initTextBox: function() {
+		_initTextBox: function(field) {
 			// wire up events
-			var field = this._field,
-				form = this._form = dom.create("form", null, this.domNode),
-				updateInterval = null,
+			this._field = field;
+			var updateInterval = null,
 				previousText = "";
 
 			this._addStyleableDomNode(this._setFocusNode(field));
@@ -35,6 +34,7 @@ define(
 					}
 				} else {
 					event.stop(e);
+					return false;
 				}
 			});
 
@@ -82,7 +82,7 @@ define(
 		},
 
 		hasText: function() {
-			return !!this._field.value.length;
+			return !!this._field.value;
 		},
 
 		properties: {
@@ -104,24 +104,18 @@ define(
 
 			editable: true,
 
-			returnKeyType: {
-				value: UI.RETURNKEY_DEFAULT,
+			maxLength: {
 				set: function(value) {
-					var title = "",
-						dest = this.domNode,
-						disp = "none";
-					if (value !== UI.RETURNKEY_DEFAULT) {
-						dest = this._form;
-						disp = "inherit";
-						~[4,8,10].indexOf(value) && (title = "Search");
-					}
-					setStyle(this._form, "display", disp);
-					this._field.title = title;
-					dom.place(this._fieldWrapper, dest);
+					value = Math.max(value|0, 0);
+					dom.attr[value > 0 ? "set" : "remove"](this._field, "maxlength", value);
 					return value;
 				}
 			},
 
+			returnKeyType:  function() {
+				return UI.RETURNKEY_DEFAULT;
+			},
+
 			suppressReturn: true,
 
 			textAlign: {