Flex Tabbing Issues

Question

I'm having a problem with tabbing where one of two things
will happen on my popup windows. I have a mixture of controls such
as text fields, radio buttons, buttons, etc. on them. The first
issue is the last tab index I have set will always be skipped. The
tabs will work correctly, but when it gets to the last button I
have a tab index set on, it will skip back to the first 'tabIndex'.
The second problem is when it gets to the last 'tabIndex', Flex
seems to be giving the focus back to the browser (Only in IE) and I
will have to tab through the URL and search box before getting back
to my first tab index. Here is some sample code that is producing
these two problems.
<mx:VBox id="mainVBox" verticalGap="5" paddingBottom="10"
width="100%">
<mx:VBox width="100%">
<mx:HBox id="voucherLine1Container" paddingLeft="5"
paddingRight="5" width="100%" includeInLayout="true"
visible="true">
<mx:Text id="voucher1Label" styleName="zoneLabelText"
paddingTop="3" text="Line 1:"/>
<commoncontrols:GreatlandTextInput
id="voucher1"
focusEnabled="true"
tabIndex="1"
styleName="zoneEditorText"
width="100%"/>
<mx:Button id="voucher1Clear" label="Clear" click="{
voucher1.text = ''; }" styleName="topButton" useHandCursor="true"
buttonMode="true" tabIndex="2"/>
</mx:HBox>
<mx:HBox id="voucherLine2Container" paddingLeft="5"
paddingRight="5" width="100%" includeInLayout="true"
visible="true">
<mx:Text id="voucher2Label" styleName="zoneLabelText"
paddingTop="3" text="Line 2:"/>
<commoncontrols:GreatlandTextInput
id="voucher2"
tabIndex="3"
width="100%"
styleName="zoneEditorText"/>
<mx:Button label="Clear" click="{ voucher2.text = ''; }"
styleName="topButton" useHandCursor="true" buttonMode="true"
tabIndex="4"/>
</mx:HBox>
</mx:VBox>
<mx:HBox id="buttonBar" paddingLeft="5" paddingRight="5"
width="100%">
<mx:Button label="Update" styleName="topButton"
click="updateZone()" useHandCursor="true" buttonMode="true"
tabIndex="5"/>
<mx:Button label="Close" focusOut="voucher1.setFocus();"
styleName="topButton" click="removePopUp()" useHandCursor="true"
buttonMode="true" tabIndex="6"/>
<mx:Button label="Help" styleName="topButton"
tabIndex="7" click="openHelpfulHints(new
HelpEvent(HelpEvent.HELP_SELECTED,ApplicationConstants.GS_FILE_NAME,ApplicationConstants. GS_FILE_NAME))"
useHandCursor="true" buttonMode="true" />
</mx:HBox>
</mx:VBox>

Answer 1

I'm having a problem with tabbing where one of two things
will happen on my popup windows. I have a mixture of controls such
as text fields, radio buttons, buttons, etc. on them. The first
issue is the last tab index I have set will always be skipped. The
tabs will work correctly, but when it gets to the last button I
have a tab index set on, it will skip back to the first 'tabIndex'.
The second problem is when it gets to the last 'tabIndex', Flex
seems to be giving the focus back to the browser (Only in IE) and I
will have to tab through the URL and search box before getting back
to my first tab index. Here is some sample code that is producing
these two problems.
<mx:VBox id="mainVBox" verticalGap="5" paddingBottom="10"
width="100%">
<mx:VBox width="100%">
<mx:HBox id="voucherLine1Container" paddingLeft="5"
paddingRight="5" width="100%" includeInLayout="true"
visible="true">
<mx:Text id="voucher1Label" styleName="zoneLabelText"
paddingTop="3" text="Line 1:"/>
<commoncontrols:GreatlandTextInput
id="voucher1"
focusEnabled="true"
tabIndex="1"
styleName="zoneEditorText"
width="100%"/>
<mx:Button id="voucher1Clear" label="Clear" click="{
voucher1.text = ''; }" styleName="topButton" useHandCursor="true"
buttonMode="true" tabIndex="2"/>
</mx:HBox>
<mx:HBox id="voucherLine2Container" paddingLeft="5"
paddingRight="5" width="100%" includeInLayout="true"
visible="true">
<mx:Text id="voucher2Label" styleName="zoneLabelText"
paddingTop="3" text="Line 2:"/>
<commoncontrols:GreatlandTextInput
id="voucher2"
tabIndex="3"
width="100%"
styleName="zoneEditorText"/>
<mx:Button label="Clear" click="{ voucher2.text = ''; }"
styleName="topButton" useHandCursor="true" buttonMode="true"
tabIndex="4"/>
</mx:HBox>
</mx:VBox>
<mx:HBox id="buttonBar" paddingLeft="5" paddingRight="5"
width="100%">
<mx:Button label="Update" styleName="topButton"
click="updateZone()" useHandCursor="true" buttonMode="true"
tabIndex="5"/>
<mx:Button label="Close" focusOut="voucher1.setFocus();"
styleName="topButton" click="removePopUp()" useHandCursor="true"
buttonMode="true" tabIndex="6"/>
<mx:Button label="Help" styleName="topButton"
tabIndex="7" click="openHelpfulHints(new
HelpEvent(HelpEvent.HELP_SELECTED,ApplicationConstants.GS_FILE_NAME,ApplicationConstants. GS_FILE_NAME))"
useHandCursor="true" buttonMode="true" />
</mx:HBox>
</mx:VBox>