CODEWITHSUNDEEP
apache-flexfocuscomponents
grey
grey

Reputation: 1150

Flex: Lose Component Focus

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.

Upvotes: 2

Views: 4007

Answers (3)

Rawle
Rawle

Reputation: 46

In case anyone else finds their way here seeking a solution to this problem, here is the answer:

private function onGlobalMouseUp(event : MouseEvent) : void {
        var fm:FocusManager = new FocusManager(stage);

        //Since Flash Player can set focus on subcomponents as well as on components themselves, 
        //findFocusManagerComponent is used to find the component that either has focus or contains the subcomponent 
        //that has focus. If, for example, a TextField contained within a TextArea component has focus, findFocusManagerComponent 
        //will return the TextArea component, and not the TextField.  This being the case, we can definitely determine 
        //whether the target object of the MouseUp event is a component (or is part of a component).  If the target
        //object is NOT a component (nor contained within one), then we clear all component focus.

        if(fm.findFocusManagerComponent(event.target as InteractiveObject) is UIComponent){
            //target of MouseUp is either a UIComponent, or is contained within a UIComponent, so do nothing.
        }else{
             //target of MouseUp is neither a UIComponent, nor is it contained within a UIComponent, so set component focus to null.
            fm.setFocus(null);
        }
    }

Upvotes: 3

grey
grey

Reputation: 1150

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!

Upvotes: 2

danjarvis
danjarvis

Reputation: 10190

Perhaps you should check out FocusManager.hideFocus().

Maybe tie it into the focusOut event of your UIComponent.

Flex API

Upvotes: 0

Related Questions