How to prevent Textinput under List from capture input

Question

When I open the menu, I want Textinputs under menu be not touchabled.

There are three Textinputs on navigator, when I open menu(a list), these Textinputs can be clecked.

I set navigator.enable=false, when I chick Overlap region of Textinput and Menu, Textinput will be hightlight, but the Menu will not get event.

My code is below:

test.mxml

<?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"
               applicationComplete="init()" applicationDPI="320">
    <fx:Declarations>
        <s:Move id="moveIn" duration="200" target="{lateralMenu}" xTo="0"/>
        <s:Move id="moveOut" duration="200" target="{lateralMenu}" xTo="{_currentStageWidth - 500}"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import spark.events.IndexChangeEvent;
            import spark.transitions.CrossFadeViewTransition;

            private var _isMenuOpen:Boolean;

            [Bindable]
            private var _currentStageWidth:Number;

            [Bindable]
            private var _currentStageHeight:Number;

            [Bindable]
            private var _logined:Boolean=false;
            public function get logined():Boolean { return _logined; }
            public function set logined(logined:Boolean):void { _logined=logined; }

            private function _onbtnHeaderMenu_ClickHandler(event:MouseEvent):void
            {
                _showMainMenu();
            }

            private function _menuBackground_ClickHandler(event:MouseEvent):void
            {
                _isMenuOpen = false;
                moveOut.play();
                navigator.enabled=true;
            }

            public function init():void
            {
                navigator.defaultPushTransition = new CrossFadeViewTransition();
                navigator.defaultPopTransition = new CrossFadeViewTransition();

                _currentStageWidth = stage.stageWidth*-1;
                lateralMenu.x = _currentStageWidth - 500;
                _currentStageHeight = navigator.height - 90;
                lateralMenu.height = _currentStageHeight;
                _isMenuOpen = false;
            }

            private function _showMainMenu() : void
            {
                if(_isMenuOpen == true)
                {
                    moveOut.play();
                    _isMenuOpen = false;
                    navigator.enabled=true;
                }
                else if(_isMenuOpen == false)
                {
                    moveIn.play();
                    _isMenuOpen = true;
                    navigator.enabled=false;
                }
            }

            protected function componentsList_changeHandler(event:IndexChangeEvent):void
            {
                moveOut.play();
                _isMenuOpen = false;
                navigator.enabled=true;
            }
        ]]>
    </fx:Script>

    <s:ViewNavigator id="navigator" width="100%" height="100%" firstView="LoginView">
        <s:navigationContent>
            <s:Button id="btnHeaderMenu" height="90" click="_onbtnHeaderMenu_ClickHandler(event)"/>
            <s:Label id="lblHead" width="100%" height="90"
                     click="_onbtnHeaderMenu_ClickHandler(event)" color="#f7f8f8"
                     fontFamily="NunitoBold" fontSize="36" paddingLeft="150" text="login"
                     typographicCase="uppercase" verticalAlign="middle" verticalCenter="0"/>
        </s:navigationContent>
    </s:ViewNavigator>

    <s:Group id="lateralMenu" y="90" width="100%" height="100%">
        <s:List id="componentsList" width="500" height="100%" alpha="0.7"
                change="componentsList_changeHandler(event)" contentBackgroundAlpha="0.5"
                labelField="text">
            <s:ArrayCollection id="listMenu">
                <fx:Object text="LANGUAGE"/>
                <fx:Object text="HOME"/>
                <fx:Object text="WOW"/>
                <fx:Object text="QUIT"/>
            </s:ArrayCollection>
        </s:List>
    </s:Group>
</s:Application>

LoginView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:Scroller id="scroller" width="100%" height="100%">
        <s:VGroup width="100%" height="100%">
            <s:VGroup width="100%">
                <s:HGroup width="100%">
                    <s:Label width="200" text="IP(*)"/>
                    <s:TextInput id="txtIP" width="100%"/>
                </s:HGroup>
                <s:HGroup width="100%">
                    <s:Label width="200" text="Username(*)"/>
                    <s:TextInput id="txtUsr" width="100%"/>
                </s:HGroup>
                <s:HGroup width="100%">
                    <s:Label width="200" text="Password"/>
                    <s:TextInput id="txtPwd" width="100%"/>
                </s:HGroup>
            </s:VGroup>
            <s:Spacer width="100%" height="70%"/>
        </s:VGroup>
    </s:Scroller>
</s:View>

Thank you very much.

Answer 1

Give one of your VGroups an id (e.g. id="txtContainer"), then enable/disable it in your _showMainMenu function:

        private function _showMainMenu() : void
        {
            if(_isMenuOpen == true)
            {
                moveOut.play();
                _isMenuOpen = false;
                navigator.enabled=true;
                txtContainer.enabled = true;
            }
            else if(_isMenuOpen == false)
            {
                moveIn.play();
                _isMenuOpen = true;
                navigator.enabled=false;
                txtContainer.enabled = false;
            }
        }

If that STILL doesn't work, try setting the enabled property on all three TextInputs manually in your _showMainMenu() function.