[PR4] searchfield focuses when I call setWidth()

[dobie_]

I have a searchfield that's getting focused on my iPod Touch (not on chrome on my desktop) when I call setWidth() on it. It's annoying because it causes the on-screen keyboard to appear. This started happening when I upgraded to ST2-pr4 from pr3. I was just wondering if anyone else has run into this.

[rdougan]

Odd. What version of iOS are you running on your iPod? I can't reproduce this with a quick testcase.

[dobie_]

iOS 5.0.1. I'll try to put together a test case. Maybe it's related to something else going on in my app as well.

[rdougan]

This is the testcase I used:

Ext.setup({
    onReady: function() {
        f = Ext.Viewport.add({
           xtype: 'searchfield',
           label: 'search'
        });

        setTimeout(function() {
            f.setWidth(100);
        }, 2000);
    }
});

Tested on the latest iPod with iOS 5.0.1 with no issues.

Let me know if you can create a testcase and I'll take a look.

[dobie_]

Here's a test case to see the behavior I'm talking about:

Ext.setup({
  viewport: {
    layout: {
      type: 'hbox',
      align: 'middle'
    },
    defaults: {
      flex: 1,
      height: 40
    },
    style: 'background-color: grey;'
  },
  onReady: function() {
    Ext.Viewport.add([
      {
        xtype: 'button',
        text: 'Back',
        handler: function(a) {
          a.hide();
        }
      },
      {
        xtype: 'searchfield',
        style: 'background-color: white;'
      },
    ]);
  }
});

It doesn't actually have to do with setWidth(). The tap event on the button seems to be going through to the input field, once it changes position due to the button being hidden.

[rdougan]

Damn, that's a good catch.

Quick fix:

Ext.define('Ext.overrides.Button', {
    overrides: 'Ext.Button',

    doTap: function(me, e) {
        var handler = me.getHandler(),
            scope = me.getScope() || me;

        if (!handler) {
            return;
        }

        if (typeof handler == 'string') {
            handler = scope[handler];
        }

        //this is done so if you hide the button in the handler, the tap event will not fire on the new element
        //where the button was.
        e.preventDefault();

        handler.apply(scope, arguments);
    }
});

[dobie_]

Hey,
Thanks for fixing it. That override code doesn't seem to be overriding the tap for me... I put some log messages in the doTap function that aren't getting called.

[dobie_]

I ended up fixing it by just extending Ext.Button and using the extended class. I couldn't get Ext.overrides to work... strange.