Give us a call 203-379-0773
Check out our Angular Book Series.

Why does a TextInput appear above my Popup in Flex 4.6?

This question came in from someone who was using our Flex Mobile DropDownList. I was writing up the issue for our product manual, but decided to blog it too.

The problem was that, in Flex 4.6, when opening the DropDownList's drop down text fields would display on top of them. After some research I was able to discover the problem.

The default skin for a TextInput in Flex 4.6 uses the StyleableStageText. StageText is always drawn above the Flash Display List, which is why the drop down's popup appears to be under it. To quote the Adobe docs on StageText:

Native text input fields cannot be clipped by other Flex content and are rendered in a layer above the Stage. Because of this limitation, components that use StageText-based skin classes will always appear to be on top of other Flex components. Flex popups and drop-downs will also be obscured by any visible native text fields. Finally, native text fields' relative z-order cannot be controlled by the application.

There are two possible solutions for this. The first is to architect your mobile application so that popups never display above a TextInput. This may be tough if you're building for multiple devices with different screen sizes.

The second is to use the Flex 4.5 skin class for your TextInputs:

<textInput skinClass="" />

The Flex 4.5 Skin Class does not use StageText under the hood, so will not exhibit the problem of the TextField positioning itself above any of your popups.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Mark Fuqua's Gravatar Does this still allow for softkeybord types? I know with some other 4.6 skins, they cause problems but the 4.5 skin does not allow some mobile specific functionality.
# Posted By Mark Fuqua | 5/1/12 2:19 PM
Jeffry Houser's Gravatar Mark,

There are some properties only supported with StageText that are not supported w/ the native Flash control. I believe that soft keyboard types is only available in StageText.
# Posted By Jeffry Houser | 5/1/12 2:39 PM
Gerardo's Gravatar This:
<textInput skinClass="" />
is doing the textinput controls duplicate the text when I put the cursor at the end and I want to delete someone character. My problem is text entered in textinput not visible.
# Posted By Gerardo | 7/9/12 1:45 PM
Jeffry Houser's Gravatar @Gerardo

Is your problem in an emulator or on a device? Which device? Without seeing more code, it's tough to say what is going on. You're likely to get more eyeballs on the problem by posting on StackOverflow or the Adobe forums.
# Posted By Jeffry Houser | 7/9/12 3:52 PM
Mike's Gravatar Is it possible to use the Flex 4.5 skin class in a Flex 4.6 mobile app build?
# Posted By Mike | 5/27/13 6:18 PM
Jeffry Houser's Gravatar Sure; but if that skin class is not available; you'll have to add it manually with the Flex 4.5 SWC. That could cause some issues if you have two libraries with the same classes.
# Posted By Jeffry Houser | 5/27/13 7:49 PM