Wednesday, October 24, 2007

tabIndex in Flex Popup Windows

This morning I had what seemed like a very simple task to complete, add a tab order to a small login form in an AIR app we're building. Several hours later I still had not accomplished this. I'm the first to admit that after a year or so of managing a team and not doing much hands on development my Flex skills are a bit rusty but this was ridiculous. The login form is in a modal popup window. Turns out that was m problem. When I would hit "Tab" the focus would jump back to the fields in the main application window. To fix this I created a FocusManager instance for the login screen and then activated it when the screen loaded. Once the screen was "activated" it held the focus while I tabbed through the form fields on that screen. Happy day. The FocusManager snippet is below, it's pretty simple, only two lines.

//grab focus for the popup window so tabIndex works.
var fm:FocusManager = new FocusManager(this);



Tim said...

Thanks you just saved me loads of time.

Zaai said...

For some reason that didn't quite work for me, as the first tabstop component wasn't selected.
What did work is this:
In creationComplete:
var comp:IFocusManagerComponent = focusManager.getNextFocusManagerComponent();
if (comp)

skjellyfetti said...

Be careful. Creating a new FocusManager can have unintended side effects (like the defaultButton processing might mysteriously stop working).

I had the exact same issue -- at app startup, a login screen popped up over the main window, but Tabbing in the popup returned the focus to controls in the main application, not the popup. After setting breakpoints in, I realized that the main application's FocusManager was getting re-activated after the popup was created. It all had to do with the timing of the creation of the popup. I moved the creation of the popup to after all of the main application windows had been created, and presto! Tabbing and defaultButton worked again.