PDA

View Full Version : Form with autoFocus field within a Window



mx_starter
9 Jun 2015, 6:21 AM
Hi guys,
can you please tell me what is the expected behavior in the following situation:

I have a form panel with a textfield, which i want to be auto-focused when the form panel is rendered.

So - i use an 'afterrender' listener (on the form panel) to focus the field.

However, the form panel itself is a child of a Window component (modal: true). And when the window is shown, i can see that the text field is focused and immediately after this - it loses the focus.

If i call the focus() method on the field after the window is shown - there is no problem and the field is normally focused.

So - how the modal window itself affects the focus of the textfield (if it does it at all) and is this an expected behaviour?

Thanks.

skirtle
9 Jun 2015, 12:17 PM
My instinct would be that afterrender is a little too early to be changing focus, though I don't have any concrete reason for that, it just feels early. If you use a blur listener you should be able to establish why the field is losing focus. If you need further help trying to understand what's happening I suggest creating a Fiddle.

The defaultFocus setting is probably the best way to achieve the end result.

mx_starter
10 Jun 2015, 12:14 AM
My instinct would be that afterrender is a little too early to be changing focus, though I don't have any concrete reason for that, it just feels early. If you use a blur listener you should be able to establish why the field is losing focus. If you need further help trying to understand what's happening I suggest creating a Fiddle.

The defaultFocus setting is probably the best way to achieve the end result.

Well, you can take a look at the fiddle below.

I configured the field with allowBlank: false, so that losing the focus will mark the field as invalid - just for visual confirmation.

The result is exactly as i described.
However - IT WORKS as expected when you run the fiddle trough the 5.1.x branch.
And does not work with 4.x and 5.0.x

If you uncomment the last line in the fiddle, you will see how i solved the issue.

oc3

skirtle
10 Jun 2015, 4:08 AM
So I changed the console logging to this to get a breakpoint:


blur: function(fld, e, opts) {
debugger;
}

Walking through the stack it seems the focus call is coming from a timer, so I have to enable Async mode (a checkbox at the top of the call stack in Chrome). From that we find that focus is being stolen by the window as part of the call toFront.

So you can fix it in a couple of ways:


Add focusOnToFront: false to the window.
Add a defaultFocus setting to the window, with the value being the itemId of the field.

mx_starter
10 Jun 2015, 4:38 AM
So I changed the console logging to this to get a breakpoint:


blur: function(fld, e, opts) {
debugger;
}

Walking through the stack it seems the focus call is coming from a timer, so I have to enable Async mode (a checkbox at the top of the call stack in Chrome). From that we find that focus is being stolen by the window as part of the call toFront.

So you can fix it in a couple of ways:

Add focusOnToFront: false to the window.
Add a defaultFocus setting to the window, with the value being the itemId of the field.


Thanks.
focusOnToFront: false is my decision in this case.

Just curious why it is performing different with 5.1.1.

To be honest, i understood very little from the Call Stack in the debugger, so i thank you for your time.

It will be good idea if someone could write a blog post for using the call stack with ExtJS.

nohuhu
10 Jun 2015, 9:53 AM
Just curious why it is performing different with 5.1.1.


Because there was a lot of improvements to focus management in Ext JS 5.0.1+, and especially in 5.1. Ext JS 4.x never tried to do it right, and focusing widgets was a hit or miss proposition.

In your case, as skirtle's fiddle is confirming, the window itself is getting focused after your input field, so it's stealing focus from the field.

Regards,
Alex.