Disable TextArea ala Facebook when clicked outside TextArea - apache-flex

Question

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

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>

Answer 2

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>