How can I tab accross a ButtonBar component in Flex?

Question

I have a button bar inf flex along with several other input controls, I have set the tabIndex property for each control and all goes well until I tab to the ButtonBar.

The ButtonBar has 3 buttons but tabbing to it, only the first button gets focus, tab again and the focus goes back to the top control...

How can I make tabbing go through ALL buttons in a Flex Button bar? Is there a way to do this or do I need to create individual buttons for this?

This seems like a possible bug to me...

Answer 1

The component is written so the user must press the left/right arrow keys when focus is within the bar to traverse the buttons--this is a fairly standard GUI behavior (you also see this in other places like radio button groups). If you look into the SDK source for ButtonBar, you can see where they've explicitly disabled tab focus for each child button as it's created:

override protected function createNavItem(
                                        label:String,
                                        icon:Class = null):IFlexDisplayObject
    {
        var newButton:Button = Button(navItemFactory.newInstance());

        // Set tabEnabled to false so individual buttons don't get focus.
        newButton.focusEnabled = false;
    ...

If you really want to change this behavior, you can make a subclass to do it, something like this:

package {
    import mx.controls.Button;
    import mx.controls.ButtonBar;
    import mx.core.IFlexDisplayObject;

    public class FocusableButtonBar extends ButtonBar {
        public function FocusableButtonBar()
        {
            super();
            this.focusEnabled = false;
        }

        override protected function createNavItem(
                    label:String, icon:Class=null):IFlexDisplayObject
        {
            var btn:Button = Button(super.createNavItem(label, icon));
            btn.focusEnabled = true;
            return btn;
        }
    }
}