sproutcore 1.10.1 → 1.10.2

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -5,9 +5,9 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/field') ;
-sc_require('system/text_selection') ;
-sc_require('mixins/static_layout') ;
+sc_require('views/field');
+sc_require('system/text_selection');
+sc_require('mixins/static_layout');
 sc_require('mixins/editable');
 
 SC.AUTOCAPITALIZE_NONE = 'none';
@@ -350,7 +350,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
   init: function () {
     var val = this.get('value');
-    this._hintON = ((!val || val && val.length===0) && !this.get('hintOnFocus')) ? YES : NO;
+    this._hintON = ((!val || val && val.length === 0) && !this.get('hintOnFocus')) ? YES : NO;
 
     var continuouslyUpdatesValue = this.get('continouslyUpdatesValue');
     if (continuouslyUpdatesValue !== null && continuouslyUpdatesValue !== undefined) {
@@ -398,62 +398,59 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         end = null;
 
         if (!element.value) {
-          start = end = 0 ;
-        }
-        else {
+          start = end = 0;
+        } else {
           // In IE8, input elements don't have hasOwnProperty() defined.
           try {
             if ('selectionStart' in element) {
-              start = element.selectionStart ;
+              start = element.selectionStart;
             }
             if ('selectionEnd' in element) {
-              end = element.selectionEnd ;
+              end = element.selectionEnd;
             }
           }
           // In Firefox when you ask the selectionStart or End of a hidden
           // input, sometimes it throws a weird error.
           // Adding this to just ignore it.
-          catch (e){
+          catch (e) {
             return null;
           }
 
           // Support Internet Explorer.
-          if (start === null  ||  end === null ) {
-            var selection = document.selection ;
+          if (start === null  ||  end === null) {
+            var selection = document.selection;
             if (selection) {
-              var type = selection.type ;
+              var type = selection.type;
               if (type  &&  (type === 'None'  ||  type === 'Text')) {
-                range = selection.createRange() ;
+                range = selection.createRange();
 
                 if (!this.get('isTextArea')) {
                   // Input tag support.  Figure out the starting position by
                   // moving the range's start position as far left as possible
                   // and seeing how many characters it actually moved over.
-                  var length = range.text.length ;
-                  start = Math.abs(range.moveStart('character', 0 - (element.value.length + 1))) ;
-                  end = start + length ;
-                }
-                else {
+                  var length = range.text.length;
+                  start = Math.abs(range.moveStart('character', 0 - (element.value.length + 1)));
+                  end = start + length;
+                } else {
                   // Textarea support.  Unfortunately, this case is a bit more
                   // complicated than the input tag case.  We need to create a
                   // "dummy" range to help in the calculations.
-                  var dummyRange = range.duplicate() ;
-                  dummyRange.moveToElementText(element) ;
-                  dummyRange.setEndPoint('EndToStart', range) ;
-                  start = dummyRange.text.length ;
-                  end = start + range.text.length ;
+                  var dummyRange = range.duplicate();
+                  dummyRange.moveToElementText(element);
+                  dummyRange.setEndPoint('EndToStart', range);
+                  start = dummyRange.text.length;
+                  end = start + range.text.length;
                 }
               }
             }
           }
         }
-        return SC.TextSelection.create({ start:start, end:end }) ;
-      }
-      else {
+
+        return SC.TextSelection.create({ start: start, end: end });
+      } else {
         return null;
       }
-    }
-    else {
+    } else {
       // The client is setting the value.  Make sure the new value is a text
       // selection object.
       if (!value  ||  !value.kindOf  ||  !value.kindOf(SC.TextSelection)) {
@@ -462,17 +459,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
       if (element) {
         if (element.setSelectionRange) {
-          element.setSelectionRange(value.get('start'), value.get('end')) ;
-        }
-        else {
+          element.setSelectionRange(value.get('start'), value.get('end'));
+        } else {
           // Support Internet Explorer.
-          range = element.createTextRange() ;
-          start = value.get('start') ;
-          range.move('character', start) ;
-          range.moveEnd('character', value.get('end') - start) ;
-          range.select() ;
+          range = element.createTextRange();
+          start = value.get('start');
+          range.move('character', start);
+          range.moveEnd('character', value.get('end') - start);
+          range.select();
         }
       }
+
       return value;
     }
 
@@ -487,8 +484,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   // INTERNAL SUPPORT
   //
 
-  // Note: isEnabled is required here because it is used in the render function.
-  displayProperties: ['isBrowserFocusable','formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'isEnabled', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
+  // Note: isEnabledInPane is required here because it is used in the renderMixin function of
+  // SC.Control. It is not a display property directly in SC.Control, because the use of it in
+  // SC.Control is only applied to input fields, which very few consumers of SC.Control have.
+  // TODO: Pull the disabled attribute updating out of SC.Control.
+  displayProperties: ['isBrowserFocusable', 'formattedHint', 'fieldValue', 'isEditing', 'isEditable', 'isEnabledInPane', 'leftAccessoryView', 'rightAccessoryView', 'isTextArea'],
 
   createChildViews: function () {
     sc_super();
@@ -502,29 +502,29 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   accessoryViewObserver: function () {
     var classNames,
         viewProperties = ['leftAccessoryView', 'rightAccessoryView'],
-        len = viewProperties.length , i, viewProperty, previousView,
+        len = viewProperties.length, i, viewProperty, previousView,
         accessoryView;
 
-    for (i=0; i<len; i++) {
+    for (i = 0; i < len; i++) {
       viewProperty = viewProperties[i];
 
       // Is there an accessory view specified?
-      previousView = this['_'+viewProperty] ;
-      accessoryView = this.get(viewProperty) ;
+      previousView = this['_' + viewProperty];
+      accessoryView = this.get(viewProperty);
 
       // If the view is the same, there's nothing to do.  Otherwise, remove
       // the old one (if any) and add the new one.
       if (! (previousView &&
              accessoryView &&
-             (previousView === accessoryView) ) ) {
+             (previousView === accessoryView))) {
 
         // If there was a previous previous accessory view, remove it now.
         if (previousView) {
           // Remove the "sc-text-field-accessory-view" class name that we had
           // added earlier.
-          classNames = previousView.get('classNames') ;
-          classNames = classNames.without('sc-text-field-accessory-view') ;
-          previousView.set('classNames', classNames) ;
+          classNames = previousView.get('classNames');
+          classNames = classNames.without('sc-text-field-accessory-view');
+          previousView.set('classNames', classNames);
 
           if (previousView.createdByParent) {
             this.removeChildAndDestroy(previousView);
@@ -533,7 +533,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
           }
 
           // Tidy up.
-          previousView = this['_'+viewProperty] = this['_created' + viewProperty] = null;
+          previousView = this['_' + viewProperty] = this['_created' + viewProperty] = null;
         }
 
         // If there's a new accessory view to add, do so now.
@@ -551,24 +551,23 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
           // Add in the "sc-text-field-accessory-view" class name so that the
           // z-index gets set correctly.
-          classNames = accessoryView.get('classNames') ;
-          var className = 'sc-text-field-accessory-view' ;
+          classNames = accessoryView.get('classNames');
+          var className = 'sc-text-field-accessory-view';
           if (classNames.indexOf(className) < 0) {
             classNames = SC.clone(classNames);
-            classNames.push(className) ;
+            classNames.push(className);
             accessoryView.set('classNames', classNames);
           }
 
           // Actually add the view to our hierarchy and cache a reference.
-          this.appendChild(accessoryView) ;
-          this['_'+viewProperty] = accessoryView ;
+          this.appendChild(accessoryView);
+          this['_' + viewProperty] = accessoryView;
         }
       }
     }
   }.observes('leftAccessoryView', 'rightAccessoryView'),
 
   render: function (context, firstTime) {
-    sc_super() ;
     var v, accessoryViewWidths, leftAdjustment, rightAdjustment;
 
     // always have at least an empty string
@@ -584,12 +583,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // if we could add in the original padding, too, but there's no efficient
     // way to do that without first rendering the element somewhere on/off-
     // screen, and we don't want to take the performance hit.)
-    accessoryViewWidths = this._getAccessoryViewWidths() ;
-    leftAdjustment  = accessoryViewWidths['left'] ;
-    rightAdjustment = accessoryViewWidths['right'] ;
+    accessoryViewWidths = this._getAccessoryViewWidths();
+    leftAdjustment  = accessoryViewWidths.left;
+    rightAdjustment = accessoryViewWidths.right;
 
-    if (leftAdjustment)  leftAdjustment  += 'px' ;
-    if (rightAdjustment) rightAdjustment += 'px' ;
+    if (leftAdjustment)  leftAdjustment  += 'px';
+    if (rightAdjustment) rightAdjustment += 'px';
 
     this._renderField(context, firstTime, v, leftAdjustment, rightAdjustment);
   },
@@ -602,7 +601,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   _forceRenderFirstTime: NO,
 
   /** @private */
-  _renderFieldLikeFirstTime: function (){
+  _renderFieldLikeFirstTime: function () {
     this.set('_forceRenderFirstTime', YES);
   }.observes('isTextArea'),
 
@@ -611,33 +610,33 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
-
     var hint = this.get('formattedHint'),
-        hintOnFocus = this.get('hintOnFocus'),
-        hintString = '',
-        maxLength = this.get('maxLength'),
-        isTextArea = this.get('isTextArea'),
-        isEnabled = this.get('isEnabled'),
-        isEditable = this.get('isEditable'),
-        autoCorrect = this.get('autoCorrect'),
-        autoCapitalize = this.get('autoCapitalize'),
-        isBrowserFocusable = this.get('isBrowserFocusable'),
-        spellCheckString='', autocapitalizeString='', autocorrectString='',
-        name, adjustmentStyle, type, hintElements, element, paddingElementStyle,
-        fieldClassNames, isOldSafari, activeState, browserFocusable;
+      hintOnFocus = this.get('hintOnFocus'),
+      hintString = '',
+      maxLength = this.get('maxLength'),
+      isTextArea = this.get('isTextArea'),
+      isEnabledInPane = this.get('isEnabledInPane'),
+      isEditable = this.get('isEditable'),
+      autoCorrect = this.get('autoCorrect'),
+      autoCapitalize = this.get('autoCapitalize'),
+      isBrowserFocusable = this.get('isBrowserFocusable'),
+      spellCheckString = '', autocapitalizeString = '', autocorrectString = '',
+      activeStateString = '', browserFocusableString = '',
+      name, adjustmentStyle, type, paddingElementStyle,
+      fieldClassNames, isOldSafari;
 
     context.setClass('text-area', isTextArea);
 
     //Adding this to differentiate between older and newer versions of safari
     //since the internal default field padding changed
-    isOldSafari= SC.browser.isWebkit &&
-        SC.browser.compare(SC.browser.engineVersion, '532')<0;
+    isOldSafari = SC.browser.isWebkit &&
+        SC.browser.compare(SC.browser.engineVersion, '532') < 0;
     context.setClass('oldWebKitFieldPadding', isOldSafari);
 
 
     if (firstTime || this._forceRenderFirstTime) {
       this._forceRenderFirstTime = NO;
-      activeState = isEnabled ? (isEditable ? '' : 'readonly="readonly"') : 'disabled="disabled"' ;
+      activeStateString = isEnabledInPane ? (isEditable ? '' : ' readonly="readonly"') : ' disabled="disabled"';
       name = this.get('layerId');
 
       spellCheckString = this.get('spellCheckEnabled') ? ' spellcheck="true"' : ' spellcheck="false"';
@@ -655,10 +654,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       }
 
       if (!isBrowserFocusable) {
-        browserFocusable = 'tabindex="-1"';
+        browserFocusableString = ' tabindex="-1"';
       }
 
-      // if hint is on and we don't want it to show on focus, create one
+        // if hint is on and we don't want it to show on focus, create one
       if (SC.platform.input.placeholder && !hintOnFocus) {
         hintString = ' placeholder="' + hint + '"';
       }
@@ -667,24 +666,24 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
       // Render the padding element, with any necessary positioning
       // adjustments to accommodate accessory views.
-      adjustmentStyle = '' ;
+      adjustmentStyle = '';
       if (leftAdjustment || rightAdjustment) {
-        adjustmentStyle = 'style="' ;
-        if (leftAdjustment)  adjustmentStyle += 'left:'  + leftAdjustment  + ';' ;
-        if (rightAdjustment) adjustmentStyle += 'right:' + rightAdjustment + ';' ;
-        adjustmentStyle += '"' ;
+        adjustmentStyle = 'style="';
+        if (leftAdjustment)  adjustmentStyle += 'left:'  + leftAdjustment  + ';';
+        if (rightAdjustment) adjustmentStyle += 'right:' + rightAdjustment + ';';
+        adjustmentStyle += '"';
       }
-      context.push('<div class="padding" '+adjustmentStyle+'>');
+      context.push('<div class="padding" ' + adjustmentStyle + '>');
 
       value = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(value) : value;
-      if (this._hintON && !SC.platform.input.placeholder && (!value || (value && value.length===0))) {
+      if (this._hintON && !SC.platform.input.placeholder && (!value || (value && value.length === 0))) {
         value = hint;
         context.setClass('sc-hint', YES);
       }
 
       if (hintOnFocus) {
-        var hintStr = '<div aria-hidden="true" class="hint '+
-                      (isTextArea ? '':'ellipsis')+'%@">'+ hint + '</div>';
+        var hintStr = '<div aria-hidden="true" class="hint ' +
+                      (isTextArea ? '':'ellipsis') + '%@">' + hint + '</div>';
         context.push(hintStr.fmt(value ? ' sc-hidden': ''));
       }
 
@@ -692,13 +691,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
       // Render the input/textarea field itself, and close off the padding.
       if (isTextArea) {
-        context.push('<textarea aria-label="' + hint + '" aria-multiline="true" class="'+fieldClassNames+'" name="'+ name+
-                      '" '+ activeState + hintString +
-                      spellCheckString + autocorrectString + browserFocusable +
-                      autocapitalizeString + ' maxlength="'+ maxLength+ '">'+
-                      value+ '</textarea></div>') ;
-      }
-      else {
+        context.push('<textarea aria-label="' + hint + '" class="' + fieldClassNames + '" aria-multiline="true"' +
+                      '" name="' + name + '"' + activeStateString + hintString +
+                      spellCheckString + autocorrectString + autocapitalizeString +
+                      browserFocusableString + ' maxlength="' + maxLength +
+                      '">' + value + '</textarea></div>');
+      } else {
         type = this.get('type');
 
         // Internet Explorer won't let us change the type attribute later
@@ -711,20 +709,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
           type = 'password';
         }
 
-        context.push('<input aria-label="' + hint + '" class="'+fieldClassNames+'" type="'+ type+
-                      '" name="'+ name + '" '+ activeState + ' value="'+ value + '"' +
-                      hintString + spellCheckString+ browserFocusable +
-                      ' maxlength="'+ maxLength+ '" '+autocorrectString+' ' +
-                      autocapitalizeString+'/></div>') ;
+        context.push('<input aria-label="' + hint + '" class="' + fieldClassNames + '" type="' + type +
+                      '" name="' + name + '"' + activeStateString + hintString +
+                      spellCheckString + autocorrectString + autocapitalizeString +
+                      browserFocusableString + ' maxlength="' + maxLength +
+                      '" value="' + value + '"' + '/></div>');
       }
-    }
-    else {
-      var input= this.$input(),
-          elem = input[0],
-          val = this.get('value');
+    } else {
+      var input = this.$input(),
+        element = input[0],
+        val = this.get('value');
 
-      if (hintOnFocus) this.$('.hint')[0].innerHTML = hint;
-      else if (!hintOnFocus) elem.placeholder = hint;
+      if (hintOnFocus) context.$('.hint')[0].innerHTML = hint;
+      else if (!hintOnFocus) element.placeholder = hint;
 
       // IE8 has problems aligning the input text in the center
       // This is a workaround for centering it.
@@ -733,18 +730,17 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       }
 
       if (!val || (val && val.length === 0)) {
-        if (this.get('isPassword')) { elem.type = 'password'; }
+        if (this.get('isPassword')) { element.type = 'password'; }
 
         if (!SC.platform.input.placeholder && this._hintON) {
           if (!this.get('isFirstResponder')) {
-          // Internet Explorer doesn't allow you to modify the type afterwards
-          // jQuery throws an exception as well, so set attribute directly
-
-          context.setClass('sc-hint', YES);
-          input.val(hint);
+            // Internet Explorer doesn't allow you to modify the type afterwards
+            // jQuery throws an exception as well, so set attribute directly
+            context.setClass('sc-hint', YES);
+            input.val(hint);
           } else {
-          // Internet Explorer doesn't allow you to modify the type afterwards
-          // jQuery throws an exception as well, so set attribute directly
+            // Internet Explorer doesn't allow you to modify the type afterwards
+            // jQuery throws an exception as well, so set attribute directly
             context.setClass('sc-hint', NO);
             input.val('');
           }
@@ -774,38 +770,31 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       } else {
         input.attr('tabindex', '-1');
       }
+
       // Enable/disable the actual input/textarea as appropriate.
-      element = input[0];
-      if (element) {
-        if (!isEnabled) {
-          element.disabled = 'true' ;
-          element.readOnly = null ;
-        } else if (!isEditable) {
-          element.disabled = null ;
-          element.readOnly = 'true' ;
-        } else {
-          element.disabled = null ;
-          element.readOnly = null ;
-        }
+      if (!isEditable) {
+        input.attr('readOnly', true);
+      } else {
+        input.attr('readOnly', null);
+      }
 
+      if (element) {
         // Adjust the padding element to accommodate any accessory views.
         paddingElementStyle = element.parentNode.style;
         if (leftAdjustment) {
           if (paddingElementStyle.left !== leftAdjustment) {
-            paddingElementStyle.left = leftAdjustment ;
+            paddingElementStyle.left = leftAdjustment;
           }
-        }
-        else {
-          paddingElementStyle.left = null ;
+        } else {
+          paddingElementStyle.left = null;
         }
 
         if (rightAdjustment) {
           if (paddingElementStyle.right !== rightAdjustment) {
-            paddingElementStyle.right = rightAdjustment ;
+            paddingElementStyle.right = rightAdjustment;
           }
-        }
-        else {
-          paddingElementStyle.right = null ;
+        } else {
+          paddingElementStyle.right = null;
         }
       }
     }
@@ -815,7 +804,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     var widths = {},
         accessoryViewPositions = ['left', 'right'],
         numberOfAccessoryViewPositions = accessoryViewPositions.length, i,
-        position, accessoryView, frames, width, layout, offset, frame;
+        position, accessoryView, width, layout, offset, frame;
     for (i = 0;  i < numberOfAccessoryViewPositions;  i++) {
       position = accessoryViewPositions[i];
       accessoryView = this['_' + position + 'AccessoryView'];
@@ -842,16 +831,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   // HANDLE NATIVE CONTROL EVENTS
   //
 
+  /**
+    Override of SC.FieldView.prototype.didCreateLayer.
+  */
   didCreateLayer: function () {
     sc_super();
+
     if (!SC.platform.input.placeholder) this.invokeLast(this._setInitialPlaceHolderIE);
     // For some strange reason if we add focus/blur events to textarea
     // inmediately they won't work. However if I add them at the end of the
     // runLoop it works fine.
     if (this.get('isTextArea')) {
       this.invokeLast(this._addTextAreaEvents);
-    }
-    else {
+    } else {
       this._addTextAreaEvents();
 
       // In Firefox, for input fields only (that is, not textarea elements),
@@ -865,11 +857,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         SC.Event.add(input, 'keypress', this, this._firefox_dispatch_keypress);
       }
     }
+  },
 
-    if (this.get('hintOnFocus') ||
-        (SC.browser.name === SC.BROWSER.ie && SC.browser.version <= 8 && !this.get('isTextArea'))) {
-      this.invokeLast(this._fixupTextLayout);
-    }
+  /**
+    SC.View view state callback.
+
+    Once the view is appended, fix up the text layout to sc-hints and inputs.
+  */
+  didAppendToDocument: function () {
+    this._fixupTextLayout();
   },
 
   /** @private
@@ -884,7 +880,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     }
 
     if (this.get('hintOnFocus') && !this.get('isTextArea')) {
-      this.$('.hint').css('line-height', this.$('.hint').outerHeight() + 'px');
+      var hintJQ = this.$('.hint');
+
+      hintJQ.css('line-height', hintJQ.outerHeight() + 'px');
     }
   },
 
@@ -895,7 +893,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     if (!SC.platform.input.placeholder && this._hintON) {
       var input = this.$input(),
           currentValue = input.val();
-      if (!currentValue || (currentValue && currentValue.length===0)) {
+      if (!currentValue || (currentValue && currentValue.length === 0)) {
         input.val(this.get('formattedHint'));
       }
     }
@@ -940,10 +938,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   */
   _textField_fieldDidFocus: function (evt) {
     SC.run(function () {
-      this.set('focused',YES);
+      this.set('focused', YES);
       this.fieldDidFocus(evt);
       var val = this.get('value');
-      if (!SC.platform.input.placeholder && ((!val) || (val && val.length===0))) {
+      if (!SC.platform.input.placeholder && ((!val) || (val && val.length === 0))) {
         this._hintON = NO;
       }
     }, this);
@@ -954,13 +952,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
    */
   _textField_fieldDidBlur: function (evt) {
     SC.run(function () {
-      this.set('focused',NO);
+      this.set('focused', NO);
       // passing the original event here instead that was potentially set from
-      // loosing the responder on the inline text editor so that we can
+      // losing the responder on the inline text editor so that we can
       // use it for the delegate to end editing
       this.fieldDidBlur(this._origEvent || evt);
       var val = this.get('value');
-      if (!SC.platform.input.placeholder && !this.get('hintOnFocus') && ((!val) || (val && val.length===0))) {
+      if (!SC.platform.input.placeholder && !this.get('hintOnFocus') && ((!val) || (val && val.length === 0))) {
         this._hintON = YES;
       }
     }, this);
@@ -990,7 +988,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   fieldDidBlur: function (evt) {
-    this.resignFirstResponder(evt) ;
+    this.resignFirstResponder(evt);
 
     if (this.get('commitOnBlur')) this.commitEditing(evt);
 
@@ -1004,7 +1002,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
   /** @private */
   _field_fieldValueDidChange: function (evt) {
-    if (this.get('focused')){
+    if (this.get('focused')) {
       SC.run(function () {
         this.fieldValueDidChange(NO);
       }, this);
@@ -1019,9 +1017,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     I welcome someone else to find a better solution to this problem. However, please make sure that it
     works with pasting via shortcut, context menu and the application menu on *All Browsers*.
    */
-  _textField_inputDidChange: function() {
+  _textField_inputDidChange: function () {
     var timerNotPending = SC.empty(this._fieldValueDidChangeTimer) || !this._fieldValueDidChangeTimer.get('isValid');
-    if(this.get('applyImmediately') && timerNotPending) {
+    if (this.get('applyImmediately') && timerNotPending) {
       this.invokeLater(this.fieldValueDidChange, 10);
     }
   },
@@ -1036,9 +1034,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
 
     if (this.getFieldValue()) {
       this.$('.hint').addClass('sc-hidden');
-    }
-    else {
+    } else {
       this.$('.hint').removeClass('sc-hidden');
+      this._fixupTextLayout();
     }
   }.observes('value'),
 
@@ -1061,9 +1059,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
         valueLen  = value ? value.length : 0,
         responder;
 
-    if (!selection  ||  ((selection.get('length') === 0  &&  (selection.get('start') === 0)  ||  selection.get('end') === valueLen))) {
+    if (!selection || ((selection.get('length') === 0 && (selection.get('start') === 0) || selection.get('end') === valueLen))) {
       responder = SC.RootResponder.responder;
-      if(evt.keyCode===9) return;
+      if (evt.keyCode === 9) return;
       responder.keypress.call(responder, evt);
       evt.stopPropagation();
     }
@@ -1089,9 +1087,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       var inp = this.$input()[0];
       try {
         if (inp) inp.focus();
-      } catch(e){}
+      } catch (e) {}
+
       if (!this._txtFieldMouseDown) {
-        this.invokeLast(this._selectRootElement) ;
+        this.invokeLast(this._selectRootElement);
       }
     }
   },
@@ -1111,8 +1110,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
           SC.browser.compare(SC.browser.osVersion, '10.7') === 0;
 
       if (!(SC.browser.name === SC.BROWSER.safari &&
-            isLion && SC.buildLocale==='ko-kr')) {
-        inputElem.select() ;
+            isLion && SC.buildLocale === 'ko-kr')) {
+        inputElem.select();
       }
     }
     else this._textField_selectionDidChange();
@@ -1147,7 +1146,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   /** @private */
-  insertText: function(chr, evt) {
+  insertText: function (chr, evt) {
     var which = evt.which,
         keyCode = evt.keyCode,
         maxLengthReached = false;
@@ -1157,8 +1156,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
       var val = this.get('value');
 
       // This code is nasty. It's thanks gecko .keycode table that has charters like & with the same keycode as up arrow key
-      if (val && ((!SC.browser.isMozilla && which>47) ||
-                  (SC.browser.isMozilla && ((which>32 && which<43) || which>47) && !(keyCode>36 && keyCode<41))) &&
+      if (val && ((!SC.browser.isMozilla && which > 47) ||
+                  (SC.browser.isMozilla && ((which > 32 && which < 43) || which > 47) && !(keyCode > 36 && keyCode < 41))) &&
           (val.length >= this.get('maxLength'))) {
         maxLengthReached = true;
       }
@@ -1166,7 +1165,6 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // validate keyDown...
     // do not validate on touch, as it prevents return.
     if ((this.performValidateKeyDown(evt) || SC.platform.touch) && !maxLengthReached) {
-      this._isKeyDown = YES;
       evt.allowDefault();
     } else {
       evt.stop();
@@ -1183,20 +1181,44 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   /** @private */
-  insertTab: function(evt) {
+  insertTab: function (evt) {
     // Don't handle if default tabbing hasn't been enabled.
-    if (!this.get('defaultTabbingEnabled')) return NO;
+    if (!this.get('defaultTabbingEnabled')) {
+      evt.preventDefault();
+      return false;
+    }
+
     // Otherwise, handle.
-    var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
+    var view = this.get('nextValidKeyView');
     if (view) view.becomeFirstResponder();
     else evt.allowDefault();
-    return YES ; // handled
+    return YES; // handled
   },
 
-  // If this is a multi-line field, then allow the new line to proceed.
   /** @private */
-  insertNewline: function(evt) {
-    if (this.get('isTextArea')) {
+  insertBacktab: function (evt) {
+    // Don't handle if default tabbing hasn't been enabled.
+    if (!this.get('defaultTabbingEnabled')) {
+      evt.preventDefault();
+      return false;
+    }
+
+    // Otherwise, handle.
+    var view = this.get('previousValidKeyView');
+    if (view) view.becomeFirstResponder();
+    else evt.allowDefault();
+    return YES; // handled
+  },
+
+  /**
+    @private
+
+    Invoked when the user presses return.  If this is a multi-line field,
+    then allow the newline to proceed.  Otherwise, try to commit the
+    edit.
+  */
+  insertNewline: function (evt) {
+    if (this.get('isTextArea') || evt.isIMEInput) {
       evt.allowDefault();
       return YES; // handled
     }
@@ -1204,37 +1226,37 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   /** @private */
-  deleteForward: function(evt) {
+  deleteForward: function (evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  deleteBackward: function(evt) {
+  deleteBackward: function (evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  moveLeft: function(evt) {
+  moveLeft: function (evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  moveRight: function(evt) {
+  moveRight: function (evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  selectAll: function(evt) {
+  selectAll: function (evt) {
     evt.allowDefault();
     return YES;
   },
 
   /** @private */
-  moveUp: function(evt) {
+  moveUp: function (evt) {
     if (this.get('isTextArea')) {
       evt.allowDefault();
       return YES;
@@ -1243,7 +1265,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
   },
 
   /** @private */
-  moveDown: function(evt) {
+  moveDown: function (evt) {
     if (this.get('isTextArea')) {
       evt.allowDefault();
       return YES;
@@ -1259,34 +1281,34 @@ SC.TextFieldView = SC.FieldView.extend(SC.Editable,
     // element's values won't be updated until after this event is finished
     // processing.
     this.notifyPropertyChange('selection');
-    this._isKeyDown = NO;
     evt.allowDefault();
     return YES;
   },
 
   mouseDown: function (evt) {
-    var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
-    this._txtFieldMouseDown=YES;
-    this.becomeFirstResponder();
     if (!this.get('isEnabledInPane')) {
       evt.stop();
       return YES;
     } else {
+      this._txtFieldMouseDown = YES;
+      this.becomeFirstResponder();
+
       return sc_super();
     }
   },
 
   mouseUp: function (evt) {
-    this._txtFieldMouseDown=NO;
-    // The caret/selection could have moved.  In some browsers, though, the
-    // element's values won't be updated until after this event is finished
-    // processing.
-    this.notifyPropertyChange('selection');
+    this._txtFieldMouseDown = NO;
 
     if (!this.get('isEnabledInPane')) {
       evt.stop();
       return YES;
     }
+
+    // The caret/selection could have moved.  In some browsers, though, the
+    // element's values won't be updated until after this event is finished
+    // processing.
+    this.notifyPropertyChange('selection');
     return sc_super();
   },