How can you keep focus and cursor in Flex's TextInput after hitting enter ?

Question

I am a Flex newbie and I am testing a little application that simulates a cart. (It is based on a nice sample by Farata Systems' Yakov Fain). Note: I am using the beta of Flash Builder 4 to code the application.

Here you have a link to the screenshot: Screenshot

(Sorry I can't insert the image of the screenshot right here since stackoverflow doesn't allow new users to use image tags.)

The application is very simple. You type a product in the TextInput control and then click on the "Add to cart" button to add it to the "cart" which is represented by the TextArea at the bottom.

That works ok.

The problem is that I also want the user to be able to keep adding items to the cart without having to click on the "Add to cart" button. So, I added code to handle the enter event of the TextInput by calling the same handler function triggered by the "Add to cart" Click event.

If you type some content and then click the "Add to cart" button, the TextInput control receives the focus and the cursor, so you can type again. However, if you hit enter, instead of clicking the button, the TextInput control keeps focused and you can see the cursor beam, but you can not enter text until you click elsewhere and come back to the control.

Below you can see the relevant part of the code, with the definition of the component that groups the three controls at the top (Label, TextInput, Button).

¿Any suggestions?

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
 <![CDATA[   
  protected function newItemHandler():void
  {
   import cart.ItemAddedEvent; 
   var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text ); 
   textInputItemDescription.text = ""; 
   textInputItemDescription.setFocus();
   textInputItemDescription.setSelection(0,0); 
   dispatchEvent( e ); // Bubble to parent = true
   trace( "I just dispatched AddItemEvent " + e.toString() + "\n Content = " + e.itemDescription );
  }
 ]]>
</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"/>

Answer 1

I think your issues is that the once you hit enter the cursor returns the to HTML page. So, while the player is showing it's focus rectangle around the correct control, the browser has gotten the cursor focus back again. A solution is to force the browser to give the Player control back by calling some simple javascript outlined here:

http://carrythezero.net/blog/2009/01/20/flex-textinput-focus-issues/

Answer 2

Hi,

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):

<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"/>

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"?>

<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"/>

Answer 3

Here is a very good example by flexexamples i think this will help you http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/

Answer 4

Thank you very much, as struggling with this issue for a long time now thank again