Flex: Lose Component Focus

Question

I have a (hopefully) quick question. I've got some stepper boxes. Though really this could apply to any interactive component. I want the selected box to lose focus when when I click anywhere else ( stage included ). Is there an easy way to do this? I can't seem to find an effective way to make it lose focus.

Answer 1

Perhaps you should check out FocusManager.hideFocus().

Maybe tie it into the focusOut event of your UIComponent.

Flex API

Answer 2

So here's the solution I've come up with that works very well. I have a function called add() which has been assigned to applicationComplete. In that function I include:

this.skin.addEventListener( MouseEvent.MOUSE_UP, loseFocus );

Which calls:

private function loseFocus( e : MouseEvent ) : void
{
    if ( e.eventPhase == EventPhase.AT_TARGET )
    {
        this.focusManager.deactivate();
    }
}

Simple enough, and does what I was looking for. "Phase" filter is necessary to keep other components from registering the clicks.

As an important note: this.skin needs to be the event target. The stage is never exposed to the mouse in a Flex application.

Example Application Code

If someone has a better solution, please suggest one!