Question

I have a form that pops up in flex, it is a movieclip contained within a UIComponent. Within this movieclip are form fields.

For some reason I can’t get the tab button working to be able to tab between the fields. I set up each field with a tabindex, but that doesn’t work.

Is there anything else I need to do besides this? This is basically all the code I am using:

email.tabIndex = 1;
city.tabIndex = 2;
firstName.tabIndex = 3;

etc.

Is this not working because of flex? And if so, what is a workaround?

Answer 1

have you tried adding a new FocusManager instance to the UIComponent that contains the movieclip? I am not sure but maybe.

Also another thing I can think of could be the tabEnabled property of the form elements and the containing Objects.

Hope it gets you closer.

Good luck,
Rob

////////// UPDATE ///////////////
Unfortunately I couldn’t make it work, but I send you my code, maybe you can do something with it.

I tried to add a movieclip and the textfields into it, but it’s the same, no TAB at all. So I simply added the textfields to the UIComponent and set all the possible tab and focus related properties to true – no luck :(.

<?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">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
        import mx.core.UIComponent;
            import flash.display.MovieClip;
            import flash.text.TextField;

            protected function init(event:Event):void
            {                                                               
                var i:uint = 0;
                var l:uint = 4;
                while (i < l)
                {
                    var tf:TextField = new TextField();
                    tf.name = "tf_" + i;
                    tf.width = 200;
                    tf.height = 21;
                    tf.border = true;
                    tf.type = "input";
                    tf.tabIndex = i;
                    tf.tabEnabled = true;
                    tf.text = "tabIndex = " + String(tf.tabIndex);
                    tf.x = 50;
                    tf.y = tf.height * i + 10 * i + 100;
                    uicomp.addChild(tf);
                    ++i;
                }
            };
        ]]>
    </fx:Script>

    <mx:UIComponent hasFocusableChildren="true" tabChildren="true" tabEnabled="true" tabFocusEnabled="true" id="uicomp" width="100%" height="100%" addedToStage="init(event);" />

</s:Application>

Sorry, that’s all I could do for now. If you get the answer please let me know, I am keen.

Cheers,
Rob