View Full Version : TextField.focus() issue in IE

26 Dec 2010, 7:53 PM
No, this is not the normal IE focus() issue (I'm already using focus(false, true)); I've been pulling my hair out on this one going on 16 hours now, scouring the Internet but finding nothing. This issue happens on IE7, IE8, and IE9; everything I've tried (that still works at all) has had no effect, while just about anything I've tried works fine on FF, Chrome, and Safari.

I have an Ext window that contains quite a few components; one of which is a form panel that contains some fields (mostly TextFields). I have some code that runs in the afterrender event of the window that sets the focus to one of the TextFields; I can't use the window's defaultButton config, because the specific TextField that gets the focus will vary depending on some logic that isn't known until the window has been rendered.

It's pretty simple, and it works fine across-the-board, expect for IE. In IE, it "almost works", but here's the crazy part that I've not been able to make any progress on and found nothing on-line or in the forums: In IE, the specified field does get the focus (or at least it appears to); the cursor is in the field and you can type in the field just fine, but if you press Tab (before or after typing something in the field), the cursor does not move to the next field on the form (as it does in all the other browsers), but instead, jumps to the browser's address bar!

Now, if you manually click in the field before or after typing, Tabbing then works as expected. It's as if the focus and the "tab position" in IE have nothing to do with each other.

Any ideas on this would be greatly appreciated!

26 Dec 2010, 11:51 PM
Ext.Window has it's own focusing logic.

Two options:
1. Set the 'defaultButton' property of the window to the component you want to have the focus on.
2. Disable window focus (configure the window with focus:Ext.emptyFn) and do the focusing yourself.

27 Dec 2010, 12:48 AM
I'm especially interested in focus issues, so I tried to make a test case based on your description. After clicking "Show Window", the focus appears in the 2nd textbox and tab moves the cursor to the third on my Win 7/ IE 8 setup.

Is that what you get as well?

I had to add a 100 ms delay in the focus method to prevent theft. That issue can apparently be avoided with a defaultButton config as specified in this thread, http://www.sencha.com/forum/showthread.php?119523 (great discovery, A), but you mention you can't use a defaultButton config here. Is the focus initially appearing for you with the 10ms default when you call focus(false,true)?

Ext.onReady(function() {

var frm = { xtype: 'form',
defaultType: 'textfield',
items: [
{ fieldLabel: '0' },
{ fieldLabel: '1' },
{ fieldLabel: '2' }

var txtFocus = {afterrender: function() { this.items.items[0].items.items[1].focus(false, 100) } }

var win = { xtype: 'window',
items: [frm],
listeners: txtFocus

new Ext.Viewport({
items: [{ xtype: 'button', text: 'Show Window', handler: function() { Ext.create(win).show() } }]


27 Dec 2010, 1:04 AM
You could use:

var txtFocus = {
render: function() {
this.defaultButton = this.items.items[0].items.items[1];
But you can do this at designtime too if you don't have any specific logic for determining which field to focus.

27 Dec 2010, 6:25 AM
@Condor: I can't use the defaultButton property, because I don't know at design time what field needs the focus. But I have tried disabling the window's focus function as you suggest. I am doing the focusing myself, using focus(false, true). And all of that works perfectly with every browser except IE. That is the key point I've been working on for days--trying to understand what about this is different under IE, trying various "alternative" approaches to make IE work (nothing has had any effect).

One thought I had this morning was whether the actual INPUT field was being focused by the focus() call, or some part of the field wrap. I haven't explored this yet, but my thinking was that maybe IE needed the INPUT field itself to be focused, while the other browsers were smart enough to focus the INPUT field when it's wrap div received focus.

27 Dec 2010, 6:28 AM
1. You could still use the defaultButton config (although not specified in the docs, you can change it after the window has been created).

2. So you disabled windows focussing? And it still doesn't focus the input?

ps. Foucssing a field will focus the <input>, so you don't have to worry about that.

27 Dec 2010, 6:31 AM
@zachext: I have experimented with various architectures and I don't think I'm having any race conditions. The default 10ms delay in the focus call seems to work across-the-board. Even in IE, the cursor shows up in the field I focused. The issue is that pressing Tab and moving away from that field doesn't work (it jumps to the browser's address field, not to the next field on my form). The fact that your test case works must mean that there is something very subtle in my code that's giving IE heartburn (although whatever it is, none of the other browsers seem to mind). Unfortunately, my code is substantially more complex than your test case, so the good news is that there may be hope, but the bad news is that it may take much longer to figure it out.

27 Dec 2010, 6:33 AM
@Condor: No, it does focus the field (with or without disabling the window's focus function--that had no effect that I could tell). But somehow, even though the cursor shows up in the target field and I can type in it just fine, I can't tab out of it--instead of tabbing to the next field, the cursor jumps to the browser's address bar (on IE 7/8/9 only).

27 Dec 2010, 7:51 AM
@Eric --

By chance, do you have Ext.useShims enabled?

27 Dec 2010, 8:07 AM
@Doug: Not explicitly (unless a ux is enabling it by default); I don't use too many third-party ux's, but I am using your ext-basex.

11 Apr 2012, 6:24 AM
Was there ever a resolution to this? I am running into this issue as well where the focus works properly, but at times will jump to the browsers address bar instead of the next field (appears to be IE9 only).