Setting focus on a Popup’s textInput control

apache-flexfocuspopuptextinputtypes

I'm trying to have a popup window with an immediately editable TextInput. This means that the user should be able to type inside the TextInput once the popup is displayed.

The problem is that I can't focus on the textInput. What happens is that when pressing a key for the first time, no text is inserted, only after a second key is pressed does the component gain focus and the user is able to type. For instance, typing "test" once the popup opened results in "est" being displayed…

For some reason the component only gains focus when the user explicitly clicks on it or types something. Programmaticaly setting the focus does not work.

Any ideas/suggestions?

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns="mog.miss.component.*" xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>
    <![CDATA[
        import mx.managers.IFocusManagerComponent;

        private function focus():void{
            focusManager.setFocus(commentTextInput as IFocusManagerComponent);
            commentTextInput.setSelection(commentTextInput.text.length,commentTextInput.text.length);
        }

    ]]>
</mx:Script>
<mx:TextInput id="commentTextInput" creationComplete="{focus()}" />

</mx:Panel>

Best Answer

The problem was that I was triggering the popup call with the F10 key. The F10 is system reserved... it did trigger the handler and the popup was created but somehow the application lost focus. Using another key fixed it. The only reserved key is F10. More about that

Related Solutions

How to you keep focus and cursor in Flex’s TextInput after hitting enter

first thanks to dan for his answer. I tried it, and it didn't work.

However, dan's post pointed me to the right direction.

First, to place you in a better context, let me show the main mxml file (SimpleCart.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               xmlns:ctrl="controls.*"
               xmlns:cart="cart.*"
               minWidth="1024" minHeight="768" >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Style source="SimpleCart.css"/>
    <ctrl:NewItem id="buttonAddItem" x="9" y="15" width="394" height="27"/>     
    <cart:SmartShoppingCart  x="8" y="47" width="378"/>         
</s:Application>

I think the problem is that the component grouping the Label, TextInput and Button -called NewItem- didn't get the focus, although the TextInput control did.

So, I simply added a call to this.SetFocus, to set the focus to the NewItem component, before setting the focus to the TextInput control.

The source code for the working version of NewItem is this (look for the //Solution comments to find the changes):

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script>
        <![CDATA[   

            protected function newItemHandler():void
            {
                import cart.ItemAddedEvent; 
                import flash.external.ExternalInterface; 

                var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text );    
                textInputItemDescription.text = "";

                // *** Solution begins here                     
                this.setFocus();
                // *** Solution ends here

                textInputItemDescription.setFocus();
                textInputItemDescription.setSelection(0,0); 
                dispatchEvent( e ); // Bubble to parent = true
            }
        ]]>
    </fx:Script>

    <fx:Metadata>
        [Event(name="ItemAddedEvent",type="cart.ItemAddedEvent",bubbles=true)]
    </fx:Metadata>

    <mx:Label text="Item description:"/>
    <s:TextInput id="textInputItemDescription" enter="newItemHandler() "/>
    <s:Button click="newItemHandler()"  label="Add to cart"/>
</s:HGroup>

Apache – Flex: Problems using scale9Grid with Image

I believe you need to apply the scale9Grid to the bitmap, instead of to the sprite/movieclip it's inside of.

Related Topic