How to cancel editing in Halo / Spark TextInput and TextArea components

Question

I am using Flex 4, ActionScript 3.

In the AdvancedDataGrid component, when you are in edit mode in a cell, you can press the Escape key to cancel editing (i.e. return to the previous value in the cell).

I expected the same behavior in edit mode in the Halo and Spark TextInput and TextArea components, and was surprised to learn that this is not so.

I looked through the attributes of all four components to find out if this needs to be configured, but found nothing.

Is this something you need to encode?

Answer 1

Yes, this is what needs to be encoded. Here's the approach I would take:

• Create a custom component that extends TextInput. Let me call it UndoTextInput .
• Add a new variable to UndoTextInput to save the source text of TextInput. We will call it originalText .
• Add an event listener to the focusIn event. In the focusIn event focusIn save the current text value in the originalText variable.
• Add an event to the focusOut event. In the focusOut event focusOut set originalText back to an empty string.
• Add an event listener to the keyDown event. In the event listener, verify that the Escape key ( Keyboard.ESCAPE ) has been pressed. If it were, reset the text back to what was saved in the originalText .

Hope this helps!

UPDATE:

Here is a brief example of how to do this using the ActionScript class. Feel free to change as needed.

 package { import flash.events.FocusEvent; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import spark.components.TextInput; public class UndoTextInput extends TextInput { private var originalText:String = ""; public function UndoTextInput() { super(); this.addEventListener(FocusEvent.FOCUS_IN, focusInEventHandler); this.addEventListener(FocusEvent.FOCUS_OUT, focusOutEventHandler); this.addEventListener(KeyboardEvent.KEY_DOWN, checkKeyPress); } protected function focusOutEventHandler(event:FocusEvent):void { this.originalText = ""; } protected function focusInEventHandler(event:FocusEvent):void { this.originalText = this.text; } protected function checkKeyPress(event:KeyboardEvent):void { if (event.keyCode == Keyboard.ESCAPE) { event.stopImmediatePropagation(); this.text = this.originalText; } } } }