martes, 10 de diciembre de 2013

Cursor Floating Issue on IOS [Workaround]

While working with Sencha Touch and iOS I have found a few issues regarding style in the new cupertino theme, all quick or small fixes, but there is one major bug regarding functionality that was driving me crazy.

Whenever you are in a form and tap an input field if you scroll the screen while tapping the input field the cursor will be fixed floating in the screen. You can check the thread in the sencha forums here.

I found a workaround by removing the focus of the textfield whenever I scroll the screen, making the cursor disappear.

Here's the code I used, I create a new class that overrides the existing form Panel.

Ext.define('decom.view.override.FormPanel', {
    override: 'Ext.form.Panel',
    initialize: function(){
        this.callParent(arguments);
        if( this.getScrollable() ) {
            var el = this;
            this.getScrollable().getScroller().on('scroll',function(){
                var textfields = el.query('textfield');
                for( i in textfields){
                    var textfield = textfields[i];
                    textfield.blur();
                }
            });
        }
    }
});