Flex Tab Key Navigation for custom Spark PopUp

This took me a while to figure out.

In a project I created a custom PopUp, nothing fancy, just a couple of text inputs. When I tried to enable Tab key navigation I set the required properties but Flex would simply ignore tab key navigation to the input fields in the pop up.

The Documentation about the IFocusManager states that a pop up will get its own FocusManager and its own tab loop.

After some tracing I found that my pop up and its child weren’t included in the FocusManager as focus objects. In fact, there was no FocusManager for my pop up at all.

The reason for this is that when the PopUpMangerImpl is about to create and configure the pop up, it checks if the pop up is a IFocusManagerContainer so that focus can be added.

Unfortunately my popup was a Group which does not implement the IFocusManagerContainer interface. Naturally no FocusManager would be created.

If you want to use a Spark Group as your pop up, the solution is to create a new class that extends from Group and implements the IFocusManagerContainer. Then use this class as the container for the pop up.

.
.
.
public class AHPopUpGroup extends Group implements IFocusManagerContainer
	{
 
		public function AHPopUpGroup()
		{
			super();
		}
 
		/**
		 *  @private
		 *  Storage for the defaultButton property.
		 */
		private var _defaultButton:IFlexDisplayObject;
 
		[Inspectable(category="General")]
 
		/**
		 *  The Button control designated as the default button for the container.
		 *  When controls in the container have focus, pressing the
		 *  Enter key is the same as clicking this Button control.
		 *
		 *  @default null
		 */
		public function get defaultButton():IFlexDisplayObject
		{
			return _defaultButton;
		}
 
		/**
		 *  @private
		 */
		public function set defaultButton(value:IFlexDisplayObject):void
		{
			_defaultButton = value;
			ContainerGlobals.focusedContainer = null;
		}
 
	}
.
.
.

And the mxml for the pop up becomes something like this

.
.
.
 
		<!---
		Uses a Group that implements the IFocusManagerContainer
		-->
 
			.
			.
			.
			TextInput, Buttons etc now get focus on tab key navigation
			.
			.
			.
 
.
.
.

Follow any responses through RSS 2.0 feed. Both comments and pings are currently closed.