[Flex 4.5.1] How to remove focus from TextInput on mouse click outside of it?

[FM_Flame]

For me clicking outside of a TextInput should always remove focus from it, only only if you click on another TextInput or Button.

I don't see any simple event like MouseEvent.MOUSE_CLICK_OUTSIDE - which would definitely simplify things.. I wonder why there isn't such event. Well anyway I can't find any other similar event and I can't figure out an easy way to do this. I also wonder why I couldn't find a solution to this on the web easily... Well anyway...

Does someone know how to do that in a convenient way?

Thanks!

[Alex J Harui]

The Flex focus system is designed to maintain focus in the currently focused component if you click somewhere that isn’t focusable. I think you’d have to detect that the event.target is not contained by an IFocusManagerComponent and set stage.focus = null.

[FM_Flame]

ok I understand why is that. For example I have a TextInput now where the user enters number through buttons which have mouseFocusEnabled = false, so the TextInput doesn't lose focus. But on a TabBar I had to set mouseFocusEnabled = true or when I switched between tabs -> switches between states, I could still type in the TextInput in the previous tab cause it didn't lose focus. Maybe TabBar's default value of that property is wrongly set to false.

Anyway, not losing focus when clicking outside is still weird. Take for example this forum, if I click outside of the box I am currently writing this, I lose focus. It's how things usually work. And flex focus is designed to work backwards to what people are used to, no matter as I already pointed out I understand there are cases it comes in handly. I hope I don't sound bad but take it just as a suggestion please that maybe if it is redesigned like this: clicking on component gets focus, clicking outside loses focus. But if you click on a button for example and you want to keep the focus on a TextInput cause you add some text, you should be able to set a property on the Button like maintainCurrentFocus = true (false by default), which would make clicking on the Button not shift the focus to it or set it to null if the component is a group that has some rect background for example, but maintain the focus on the TextInput.

I could be missing something about the current design of how the focus works in flex, but from my point of view at the moment, the design I describe to use is just like how I am usually used to be working with focus as a user, not as developer.

Maybe you could agree or maybe you know some reason by which things are how they are at the moment that I don't see. But if you think I make sense please let me know, maybe I could fill a minor enhancement request for that ?

[Alex J Harui]

You are welcome to file an enhancement request, but I do not agree that your experience is desirable or should be the default. For sure, lots of browsers work the way you want it to, but Windows desktop apps do not, and that was the usability we chose. That way some accessible component always has focus so vision-impaired folks don’t lose context of where they are.

[FM_Flame]

Interesting, I guess you are right. Then there are 2 cases: One behaviour for web and one for desktop. I am not sure if browsers should make the focus behavior like the flex focus design or flex implement a web focus behaviour apart from the desktop focus behaviour it currently has. I just wanted to point out the difference I see as a web user...

[chocobo_green]

When I click outside of a Windows Explorer address bar, the focus to the file address is lost.

When I click anywhere else, the file renaming mode is off and the focus to file rename is lost.

I believe the textinput focus handling is strange.

[Guest]

You can setFocus() function for this problem. For example, you have a textinput,an image and a button on the stage. While your textinput in focus, you click on the image whose clickhandler like:

yourbutton.setFocus();

By this way button gets focus, while the textinput loses focus.

Hope, this will help you.

[malliktondepu]

Hi,

i got the solution for this.

textInput.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, textInputMouseFocusChange, false, 0, true);

// basically the above Event will dispatch when ever the user clicked outside of textinput when the current focus in in textInput.

private function textInputMouseFocusChange(event:FocusEvent):void{

// basically u dont need this first line if u are not calling any function on textInput focusout.

                textInput.dispatchEvent(new FocusEvent(FocusEvent.FOCUS_OUT));

// the remaing peice of code will remove the current focus from textInput to the area where the user had clicked.

// this piece of code i have taken from one of the comments in the blog : http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/

                var focusPoint:Point = new Point();

                focusPoint.x = stage.mouseX;

                focusPoint.y = stage.mouseY;

                var i:int = (stage.getObjectsUnderPoint(focusPoint).length);

                stage.focus=InteractiveObject(stage.getObjectsUnderPoint(focusPoint)[i-1].parent);

            }