Tabbing does not work in mx:TileList component

Question

I am using mx:Tilelist component to display set of textfields on screen, but when i try to traverse the fields through TAB foucs move out of the list. Please provide solution for this problem. Following is the code i am using

    <mx:TileList id="tileList"
            dataProvider="{collection}"
            change="setCurrentIndex(tileList.selectedIndex);"
            dataChange="setCurrentIndex(tileList.selectedIndex);"
            columnCount="1"
            columnWidth="345"
            itemRenderer="components.InputParamIR"
            rowHeight="30"
            verticalScrollPolicy="auto"
            horizontalScrollPolicy="auto"
            backgroundColor="#EEEEEE"
            dragEnabled="false"
            dragMoveEnabled="true"
            dropEnabled="true"
            width="100%" height="100%"
            itemClick="chartTileClick(event);" 
            />


<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.containers.Panel;

        [Bindable]
        public var index:uint;
        [Bindable]
        public var collection:ArrayCollection = new ArrayCollection(); 
        [Bindable]
        public var isVisible:Boolean ;

        public  function initEventsLocal(event:Event):void
            {
             this.initEvents(event);
             collection = new ArrayCollection(); 
             isVisible = false;

            }   

        private function chartTileClick(event:ListEvent):void
        {

            event.currentTarget.tabFocusEnabled=true;
            event.currentTarget.tabEnabled=true;

        } 

    ]]>
</fx:Script>

score 0 · Answer 1 · edited May 23 '17 at 11:44

In Flex List Itemrenderer may not get the focus since it is non editable and it will not implement the focus manager interface, you need to implement IFocusManagerComponent in your item renderer components.InputParamIR also you have to override your TileList class to enable tab for childrens.

package  
{  
    import mx.controls.TileList;  

        public class MyTileList extends TileList  
        {  

            override protected function createChildren():void {  
              super.createChildren();  
              this.listContent.tabChildren = this.tabChildren  
              this.listContent.tabEnabled = this.tabEnabled  
            }  
        }  
}

Have a look in to these

Tile list item renderer text focus solved

Issues with keyboard navigation on list with custom renderer

i hope this will help you

happy coding...

Tabbing does not work in mx:TileList component

1 Answers1