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.

This:<textInput skinClass="spark.skins.mobile.TextInputSkin" />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.

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.

Apache Flex, Flex and Apache are either registered trademarks or trademarks of the Apache Software Foundation in the United States and/or other countries, and are
used with permission as of 2012.
The Apache Software Foundation has no affiliation with and does not endorse or review the materials provided at this website, which is managed by DotComIt, LLC.