8 Replies Latest reply on Apr 7, 2011 4:41 AM by Ria Flex

    RadioButtonGroup not Focusable

    Fabien Warniez

      Hi folks,


      I am developing an application that requires a lot of RadioButtons, grouped by RadioButtonGroups, all enclosed into custom components.


      When I put several components of the same type with RadioButtons inside, I can only focus on the first one. If I tab again I skip all the following RadioButtons and jump to the next non-RadioButton Focusable component.


      Here is the Main.mxml file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
           <mx:TextInput tabIndex="10"/>
           <local:RadioButtons tabIndex="20"/>
           <local:RadioButtons tabIndex="30"/>


      And here is the RadioButtons.mxml component:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
           <mx:RadioButtonGroup id="group"/>
           <mx:RadioButton label="Yes" group="{group}"/>
           <mx:RadioButton label="No" group="{group}"/>


      In this example, only the first Yes/No buttons are focusable by the Tab key.


      Is this a known bug? How do I fix this?


      Thank you very much in advance.



        • 1. Re: RadioButtonGroup not Focusable
          Krish.praveen Level 1



          If you are moving in the component having radiobutton group, you have to go for up and down arrow keys.

          if you press tab, it will move to the next component.


          Hope you can try the same.



          • 2. Re: RadioButtonGroup not Focusable
            Fabien Warniez Level 1

            Thanks for your answer but unfortunately this is not my problem.


            When I am on a RadioButtonGroup I can change the value selected with up and down keys without problem, but I can not tab to the next RadioButtonGroup.


            Hope I was clear.

            • 3. Re: RadioButtonGroup not Focusable
              Gregory Lafrance Level 6

              If this post answers your question or helps, please mark it as such.


              I might not be understanding your issue as well as I should, but this seems to work:


              <?xml version="1.0"?>
              <!-- Simple example to demonstrate RadioButtonGroup control. -->
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                      import mx.controls.Alert;
                      import  mx.events.ItemClickEvent;
                      // Event handler function to display the selected button
                      // in an Alert control.
                      private function handleCard(event:ItemClickEvent):void {
                          if (event.currentTarget.selectedValue == "AmEx") {
                                  Alert.show("You selected American Express") 
                          else {
                              if (event.currentTarget.selectedValue == "MC") {
                                  Alert.show("You selected MasterCard") 
                              else {
                                  Alert.show("You selected Visa") 
                  <mx:Panel title="RadioButtonGroup Control Example" height="75%" width="75%" 
                      paddingTop="10" paddingLeft="10">
                      <mx:Label width="100%" color="blue" 
                          text="Select a type of credit card."/>
                      <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
                      <mx:RadioButton groupName="cardtype" id="americanExpress" value="AmEx" 
                          label="American Express" width="150" />
                      <mx:RadioButton groupName="cardtype" id="masterCard" value="MC" 
                          label="MasterCard" width="150" />
                      <mx:RadioButton groupName="cardtype" id="visa" value="Visa" 
                          label="Visa" width="150" />
                      <mx:RadioButtonGroup id="cardtype2" itemClick="handleCard(event);"/>
                      <mx:RadioButton groupName="cardtype2" 
                          label="American Express" width="150" />
                      <mx:RadioButton groupName="cardtype2"  value="MC" 
                          label="MasterCard" width="150" />
                      <mx:RadioButton groupName="cardtype2" value="Visa" 
                          label="Visa" width="150" />
                      <mx:RadioButtonGroup id="cardtype3" itemClick="handleCard(event);"/>
                      <mx:RadioButton groupName="cardtype3"  value="AmEx" 
                          label="American Express" width="150" />
                      <mx:RadioButton groupName="cardtype3"  value="MC" 
                          label="MasterCard" width="150" />
                      <mx:RadioButton groupName="cardtype3" value="Visa" 
                          label="Visa" width="150" />
              • 4. Re: RadioButtonGroup not Focusable
                Fabien Warniez Level 1

                Thanks Greg but I think you don't understand my problem.


                In my application I have a component that is composed of two RadioButton, Yes and No. The RadioButtonGroup is defined in the component itself.


                If I put two of those components on the same view, I can not focus with the keyboard on the second component. Though, if I use the application only with the mouse it works perfectly, ie I have two separate RadioButtonGroups with RadioButtons which don't interfer with each other.


                You might want to try this code into your Flex Builder because the behavior is really strange.


                Thanks for your time.

                • 5. Re: RadioButtonGroup not Focusable
                  Flex harUI Adobe Employee

                  That's by design.  In Flex and Windows, tab takes you to a group of radiobuttons, and arrowkeys select one in the group


                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: RadioButtonGroup not Focusable
                    Fabien Warniez Level 1

                    I know that is by design, that is not my problem neither.


                    With the code I pasted, I should be able to tab once to focus on the first set of RadioButtons, then use the up and down arrow keys to select the value, then tab again to focus on the second set of RadioButtons, and use up and down arrows to select the second value.


                    What I am seeing here is that I CAN NOT select any value of the second set of RadioButtons.


                    The problem is obvious when you try to run the code.


                    I really think that is a bug of Flex.



                    • 7. Re: RadioButtonGroup not Focusable
                      Flex harUI Adobe Employee

                      Sorry, jumped in on the end of the thread.  Group names have to be unique.  You are using the same group name for each instance of the set of radiobuttons.


                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      1 person found this helpful
                      • 8. Re: RadioButtonGroup not Focusable
                        Ria Flex Level 1

                        In that case the design is wrong and the current behaviour should be considered a bug.

                        If group is specified (instead of groupName) then it should work just as well.