Flex TabNavigator null object issue

Question

I am having trouble with TabNavigator that it always dispatch error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.containers::TabNavigator/keyDownHandler()[/Users/justinmclean/Documents/ApacheFlex4.11.0/frameworks/projects/mx/src/mx/containers/TabNavigator.as:903]

Example code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="init(event)">
<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function init(event:FlexEvent):void
        {
            stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
        }

        public function handleKeyDown(event:KeyboardEvent):void
        {
            if(event.keyCode == Keyboard.F1){
                if(currentState=="State1"){
                    currentState = "setting";
                }else{
                    currentState = "State1";
                }
            }
        }
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
    <s:State name="State1"/>
    <s:State name="setting"/>
</s:states>

<s:BorderContainer left="0" right="0" top="0" bottom="0" includeIn="setting">
<mx:TabNavigator id="TabNavigator" left="10" right="10" top="110" bottom="10" creationPolicy="all">
    <!-- General Tab -->
    <s:NavigatorContent id="generaltab" width="100%" height="100%" label="General">
        <s:Group id="generalcontainer">
        </s:Group>
    </s:NavigatorContent>
    <!-- Screen Tab -->
    <s:NavigatorContent id="screentab" width="100%" height="100%" label="Screen">
        <s:Group id="screencontainer" width="100%" height="100%">
        </s:Group>
    </s:NavigatorContent>
    <!-- Playlist Tab -->
    <s:NavigatorContent id="playlisttab" width="100%" height="100%" label="Playlist">
        <s:Group id="playlistcontainer">    
        </s:Group>
    </s:NavigatorContent>
</mx:TabNavigator>
    </s:BorderContainer>
</s:WindowedApplication>

When I press on F1, it will jump to setting page. Which will show the tabnavigator. Press F1 again to hide it.

Basically, there is no problem to show and hide the tab navigator repeatedly. But if I clicked any tab before hide the tab navigator, when I try to show the tab navigator again by pressing F1 on keyboard, it dispatch error as I showed above.

How can I solve / prevent the error from occurring?

Thank you.

Answer 1

I just found a way to prevent the bug from occurring. That is by adding TabNavigator.stage.focus=null; before changing the state back to State1