TextArea scroll on iOS not working

[majyer]

ui.TextArea = Ext.extend(Ext.form.TextArea, !Ext.is.iOS ? {} : {
lastY: undefined,
lastPos: {},
handleTouch: function (e) { this.lastY = e.pageY; },
handleMove: function (e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;

this.lastY = e.pageY;

// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if ((top && up) || (bottom && down)) {
e.preventDefault();
e.stopPropagation(); // this tops scroll going to parent
}


// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if (!(top && bottom)) {
e.stopPropagation(); // this tops scroll going to parent
}
},

resizeTexteare: function () {
var elts = Ext.query('#mytextarea');

// Get the width of the element
var width = Ext.get(id).dom.scrollWidth

// Split the user input based on the line break
var lines = Ext.getCmp(id).getValue().split('\n');

// in 100px you put around 14 digits, so using a simple rule of 3 to find out the max width of the line
// TODO : adapt to font-size
var max = 14 * width / 100;


// For each line, compute the nombre of lines occupied
var nb_lines_area = 0;
for (var i = 0; i < lines.length; i++) {
nb_lines_area++; // because we jump a line

// The line exceed the max width
if (lines[i].length > max) {
nb_lines_area += Math.floor(lines[i].length / max);
}
}




// Modify the height of the textarea, knowing that a line is about 20px
// TODO : adapt to font-size
var height = 20 * nb_lines_area;


// My textarea is at least 90px long
if (height > 90)
Ext.getCmp(id).setHeight(height + 'px');
},
initEvents: function () {
// var textArea = this.element.select('textarea').elements[0]; // Note: this.getInput() should be the method, but doesn't exist for some reason
var textArea = this.fieldEl.dom;


// have to add these events directly to the DOM textarea (as opposed to this.fieldEl.on),
// otherwise they're handled after Ext.gesture.Manager and preventDefault will already have been called.
textArea.addEventListener(
Ext.supports.Touch ? 'touchstart' : 'mousedown',
Ext.createDelegate(this.handleTouch, this),
false);


textArea.addEventListener(
Ext.supports.Touch ? 'touchmove' : 'mousemove',
Ext.createDelegate(this.handleMove, this),
false);




//this.original.initialize.apply(this, arguments);
}
});
Ext.reg('c_textareafield', ui.TextArea);

issue1: Can not get the focus,It looks readonly.
issue2: can not scroll.

[joeri]

Patch for ST2:

// override 2.0.1 to allow scrolling of textarea on ipad
Ext.define('Fix.Ext.form.TextArea', {
   override: 'Ext.form.TextArea',
   initialize: function() {
      this.callParent();
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
         this.handleTouchListener = Ext.bind(this.handleTouch, this),
         false);
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
         this.handleMoveListener = Ext.bind(this.handleMove, this),
         false);
      this.moveListenersAttached = true;
   },
   destroy: function() {
      // cleanup event listeners to avoid memory leak
      if (this.moveListenersAttached) {
         this.moveListenersAttached = false;
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
            this.handleTouchListener,
            false);
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
            this.handleMoveListener,
            false);
         this.handleTouchListener = this.handleMoveListener = null;
      };
      this.callParent();
   },
   handleTouch: function(e) {
      this.lastY = e.pageY;
   },
  	handleMove: function(e) {
  		var textArea = e.target;
  		var top = textArea.scrollTop <= 0;
  		var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
  		var up = e.pageY > this.lastY;
  		var down = e.pageY < this.lastY;
  		this.lastY = e.pageY;
      // default (mobile safari) action when dragging past the top or bottom of a scrollable
      // textarea is to scroll the containing div, so prevent that.
  		if((top && up) || (bottom && down))	e.preventDefault();
      // Sencha disables textarea scrolling on iOS by default,
      // so stop propagating the event to delegate to iOS.
  		if(!(top && bottom))	e.stopPropagation();
  	}
});

[cel_matrix]

Hi,

I tried the override function, it is not working if the text area is the last item in a long page and you need to scroll to type in the text area. The cursor is hidden you type more then height of the textarea and suddenly the scroll starts working after typing around 10 lines. Someone please help in fixing this issue.


Thanks,
Celmatrix

[jairok]

Hi all!

Any news about a fix for 2.1 ??

[cristiandavidgm]

Worked for me, thank you very very very much

Patch for ST2:

// override 2.0.1 to allow scrolling of textarea on ipad
Ext.define('Fix.Ext.form.TextArea', {
   override: 'Ext.form.TextArea',
   initialize: function() {
      this.callParent();
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
         this.handleTouchListener = Ext.bind(this.handleTouch, this),
         false);
      this.element.dom.addEventListener(
         Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
         this.handleMoveListener = Ext.bind(this.handleMove, this),
         false);
      this.moveListenersAttached = true;
   },
   destroy: function() {
      // cleanup event listeners to avoid memory leak
      if (this.moveListenersAttached) {
         this.moveListenersAttached = false;
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
            this.handleTouchListener,
            false);
         this.element.dom.removeEventListener(
            Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
            this.handleMoveListener,
            false);
         this.handleTouchListener = this.handleMoveListener = null;
      };
      this.callParent();
   },
   handleTouch: function(e) {
      this.lastY = e.pageY;
   },
      handleMove: function(e) {
          var textArea = e.target;
          var top = textArea.scrollTop <= 0;
          var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
          var up = e.pageY > this.lastY;
          var down = e.pageY < this.lastY;
          this.lastY = e.pageY;
      // default (mobile safari) action when dragging past the top or bottom of a scrollable
      // textarea is to scroll the containing div, so prevent that.
          if((top && up) || (bottom && down))    e.preventDefault();
      // Sencha disables textarea scrolling on iOS by default,
      // so stop propagating the event to delegate to iOS.
          if(!(top && bottom))    e.stopPropagation();
      }
});