Disable TextArea ala Facebook when clicked outside TextArea

Question

Hi

I have a textArea and a Button - I want the Button to disappear when the user clicks anywhere in the app window EXCEPT the "Send" button

<mx:Button x="306" y="168" label="Button" id="btn" click="Alert.show('Button clicked')"/>
<mx:TextArea x="138" y="146" focusOut="btn.visible=false" focusIn="btn.visible=true"/>

I tried calling btn.visible=false when TextArea loses focus (using focusOut event) - if I click anywhere in the app it works, but it also works when I click the Button - the TextArea focusOut event is processed first and the click for the button later - can someone please help out with this?

Thanks!

Answer 1

I previously said use call later, but on testing it doesn't work, sorry for wasting anyone's time. Instead you need to use the focus manager something like this: I tested this and it seems solid.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
    import mx.controls.Alert;
    import mx.managers.FocusManager; //pull in the manager

    private function onFocusOut(event:FocusEvent):void{
            if(getFocus() != null){ //in case focus goes outside the flash player
                if(getFocus().name == "btn"){ //the focus went to the item with the ID "btn"
                    return; //do nothing, let the click handler work
                }else{ //any other item gets focus
                    btn.visible=false;  //disappear 
                }
            }
        }

    private function clickHandler():void{ // made it it's own function so do more than just alert
        Alert.show('Button clicked');
        btn.visible=false;
    }
]]>
</mx:Script>

    <mx:Button x="306" y="168" label="Button" id="btn" click="clickHandler();"/>
    <mx:TextArea x="138" y="146" focusOut="onFocusOut(event)" focusIn="btn.visible=true"/>

</mx:Application>

Answer 2

were u trying to override the default focusOut handler? That doesn't work...

private function setBtnNotVisible():void
{
    btn.visible=false;
}
override protected function focusOutHandler(event:FocusEvent):void
{
    callLater(setBtnNotVisible);
}

Neither does writing my own event handler...

private function setBtnNotVisible():void
{
    btn.visible=false;
}
private function focusOutHandler2(event:FocusEvent):void
{
    callLater(setBtnNotVisible);
}

--------------------- Full Code ------------------

##### Try clicking INSIDE the textArea and then on the button, I cannot catch the Alert

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
    import mx.controls.Alert;

    private function onFocusOut(event:FocusEvent):void{
            callLater(
                function ():void{
                    btn.visible=false;
               }
            )
        }
]]>
</mx:Script>

    <mx:Button x="306" y="168" label="Button" id="btn" click="Alert.show('Button clicked')"/>
    <mx:TextArea x="138" y="146" focusOut="onFocusOut(event)" focusIn="btn.visible=true"/>

</mx:Application>