0
votes

when having several elements like radiobuttons, which - when selected - have additional fields the tab ordering is not properly working. in fact (in my project) the tab gets "catched" in between a radio button and one datefield.

three radiobuttons with additional input elements

here is a minimal example which is not properly working. if you run that example and press tab to get through all fields, tab stops at first radiobutton (=ok), next on datefield (=ok, because all radiobuttons should be seen as one tabstop). but if you press tab another time, it jumps to the third radiobutton (=false, because the first radiobutton was already reached) and finally gets to the textinput (=ok).

in my project there are more complex forms with even more strange behaviour.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:VGroup>
        <s:RadioButton label="use no data"/>
        <s:HGroup>
            <s:RadioButton label="use date"/>
            <mx:DateField  />
        </s:HGroup>
        <s:HGroup>
            <s:RadioButton label="use text"/>
            <s:TextInput />
        </s:HGroup>
    </s:VGroup>
</s:Application>
1

1 Answers

0
votes

my solution here is to give tabIndex values, where the radiobutton-tabIndex-values all are BEFORE the values for the rest of the elements (in this case datefield + textinput)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" >
    <s:VGroup>
        <s:RadioButton label="use no data" tabIndex="1" />
        <s:HGroup>
            <s:RadioButton label="use date" tabIndex="2" />
            <mx:DateField tabIndex="100" />
        </s:HGroup>
        <s:HGroup>
            <s:RadioButton label="use text" tabIndex="3" />
            <s:TextInput tabIndex="101" />
        </s:HGroup>
    </s:VGroup>
</s:Application>