TextInput.setFocus() doesn't seem to work if the TextInput is in a
TabNavigator/ViewStack. Is this a known bug?

I have a TabNavigator in a TitleWindow. There are multiple VBoxes for each
"tab" in the TabNavigator. Each VBox has a Form with a TextInput. When the user
clicks a tab to view a different VBox in the TabNavigator/ViewStack, I want the
TextInput in that VBoxes Form to get the focus and have the cursor placed in
it. Using the valueCommit event of the TabNavigator sets the TextInput's focus,
but doesn't place the cursor. I've tried
"Application.application.systemManager.stage.f ocus = TextInput",
"focusManager.setFocus(TextInput)", and "TextInput.setFocus()" to no avail.

Any workarounds or help is greatly appreciated.

tabnav.addEventListener(FlexEvent.VALUE_COMMIT, changeTabs);

private function changeTabs(event:Event):void
{
//Set focus to TextInput based on which tab is selected
switch (tabnav.selectedIndex)
{
case 0:
{
//Application.application.systemManager.stage.focu s = name1Text;
//focusManager.setFocus(name1Text);
name1Text.setFocus();
break;
}
case 1:
{
//Application.application.systemManager.stage.focu s = addNumText;
//focusManager.setFocus(addNumText);
addNumText.setFocus();
break;
}
case 2:
{
//Application.application.systemManager.stage.focu s = qsText;
//focusManager.setFocus(qsText);
qsText.setFocus();
break;
}
case 3:
{
//Application.application.systemManager.stage.focu s = apn1Text;
//focusManager.setFocus(apn1Text);
apn1Text.setFocus();
break;
}
}
}

It seems all the info on the web about this deals with IE not focusing the Flex app on page load. My issue happens always, not just on page load.

Do you have more complete code? If you could post that, or better yet, put the app up with view source enabled where we can get our hands on it.

Full code below. changeTabs() is being fired correctly, but TextInput.setFocus
(and commented out methods) has no effect.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function changeTabs(event:Event):void
{
//Set focus to TextInput based on which tab is selected
switch (tabnav.selectedIndex)
{
case 0:
{
//Application.application.systemManager.stage.focu s = name1Text;
//focusManager.setFocus(name1Text);
name1Text.setFocus();
break;
}
case 1:
{
//Application.application.systemManager.stage.focu s = addNumText;
//focusManager.setFocus(addNumText);
addNumText.setFocus();
break;
}
case 2:
{
//Application.application.systemManager.stage.focu s = qsText;
//focusManager.setFocus(qsText);
qsText.setFocus();
break;
}
case 3:
{
//Application.application.systemManager.stage.focu s = apn1Text;
//focusManager.setFocus(apn1Text);
apn1Text.setFocus();
break;
}
}
}
]]>
</mx:Script>
<mx:TitleWindow>
<mx:TabNavigator id="tabnav" valueCommit="changeTabs(event);"
creationPolicy="all">
<mx:VBox label="First">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="name1Text"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Second">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="addNumText"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Third">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="qsText"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Fourth">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="apn1Text"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:TabNavigator>
</mx:TitleWindow>
</mx:Application>

I think you're on the right track concerning the browser focus issue. Here's
how to test it.
Check your project settings:
Project-->Properties-->Flex Compiler
and see if the check box for "Enable integration with browser navigation" is
selected. It could be, by default.
De-select it. You'll get a warning message re: overwriting the HTML wrapper.
Don't worry about it; click OK.
Now run your project and the setFocus() should work.

"Enable integration with browser navigation" is already deselected. I don't
think this is a browser focus issue, it is a Flex focus issue. The browser
focus issue only occurred when the Flex app loads, and that is resolved using
the below function in the HTML wrapper.

Any other ideas?

function startup()
{
document.${application}.focus(); //Gives Flex app focus in browser
}

Sorry, but I got sidetracked with the Deep Linking issue.
Change this line: valueCommit="changeTabs(event);"
To this: mouseUp="changeTabs(event);"

The problem here is that the valueCommit causes Flex to move focus back to the
tab. The mouseUp event works because the valueCommit has already fired BEFORE
the mouseUp event, and now you can move it to the textInput. At least that's
what it looks like to me when I trace it.
The focus in your app was just bouncing to the textInput, and back to the tab
again.

That did it, the one event I didn't try. Thanks a heap!

Using the mouseUp event to fire the function to set the TextInput focus does
work, but it is fired everytime I click inside the TabNavigator, even if I
click on other form items.

So if I have more than one TextInput in one tab, clicking anywhere on the
form, even in a different TextInput, will make the focus go back to the
TextInput specified. The application code below illustrates this. I only want
the focus to go to the specified TextInput when the user clicks on the tab.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function changeTabs(event:Event):void
{
//Set focus to TextInput based on which tab is selected
switch (tabnav.selectedIndex)
{
case 0:
{
name1Text.setFocus();
break;
}
case 1:
{
addNumText.setFocus();
break;
}
case 2:
{
qsText.setFocus();
break;
}
case 3:
{
apn1Text.setFocus();
break;
}
}
}
]]>
</mx:Script>
<mx:TitleWindow>
<mx:TabNavigator id="tabnav" mouseUp="changeTabs(event);"
creationPolicy="all">
<mx:VBox label="First">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="name1Text"/>
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Second">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="addNumText"/>
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Third">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="qsText"/>
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:VBox>
<mx:VBox label="Fourth">
<mx:Form>
<mx:FormItem>
<mx:TextInput id="apn1Text"/>
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:TabNavigator>
</mx:TitleWindow>
</mx:Application>

The work-around I posted was based on your original code so no, it won't work
with multiple textInputs on the same tab.

I did a little more thinking on this one...
When a user refreshes the browser, the application loses focus, so what you
need to do is look at the application's events, and not the tab navigator.

Here's some code to demonstrate what's happening:
On your application tag, add this:
creationComplete="initApp()"
Then in a script block, add this:
import mx.events.ResizeEvent;
import mx.controls.Alert;

private function initApp():void{
this.addEventListener(ResizeEvent.RESIZE,handleRes izeEvent);
}
private function handleResizeEvent(event:ResizeEvent):void{
Alert.show('focus lost');
}

In the handleResizeEvent function, write code to manipulate focus back to
whatever tab you wish, and you'll have it.