The skin that shows text to the right of where it should in the input field is using the non-mobile "spark" theme. If you want TLF (spark skin if you are running in the mobile theme) you need to set the skinClass to:
spark.skins.mobile.TextInputSkin This is the one that displays the text further to the right until you open the softkeyboard again like you saw. I suggest not using this one for mobile development. Reading the overview docs here will make all this clearer: https://flex.apache.org/asdoc/spark/components/TextInput.html <https://flex.apache.org/asdoc/spark/components/TextInput.html> The native TextInput control is used by default in mobile theme: spark.skins.mobile.StageTextInputSkin And it's the better one to use, overall, but you have to deal with the z-order issues and the fact you can't hide the contents of the control. There are significant limitations to using the StageText version: Limitation of StageText-based controls: 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. The native controls do not support embedded fonts. Links and html markup are not supported. text is always selectable. Fractional alpha values are not supported. Keyboard events are not dispatched for most keys. This means that the tab key will not dispatch keyDown or keyUp events so focus cannot be removed from a StageText-based control with the tab key. StageText is currently not capable of measuring text. At this time StageText does not support programmatic control of scroll position. At this time StageText does not support an event model necessary to allow for touch-based scrolling of forms containing native text fields. For more on StageText, go here: https://flex.apache.org/asdoc/spark/components/supportClasses/StyleableStageText.html <https://flex.apache.org/asdoc/spark/components/supportClasses/StyleableStageText.html> I don't have a solid solution for you on the phantom text appearing. However, if the text is the text that you are deleting, I'd try these ideas: Delete the text, and don't close the dialog until next frame (delete text, then do callLater(closeMe). That should ensure the native control no longer contains the text. I hate using callLater but in Flex development it's inevitable that you will find it's a valuable workaround. Always create a new instance of the dialog by doing a new Dialog() assignment instead of caching it and hiding/showing using popup manager. Ensure the content of the text property of your input field is empty in the Dialog() instance before you show it with popup manager. The key is to ensure there is no text in the field before you show the dialog. Again, this problem is a pain, but working around this and using the native StageText control is better than the spark version. And there is a bug in the TextInputSkin that is causing the content part to show up to the right of where you want it. I tried extending that skin and replacing it to fix the issue and everytime I ran my app, it would throw Errors that didn't make sense. There is something strange about trying to us TextInputSkin (non-native) in a mobile app. I recommend not trying that. Hope this helps. Erik > On Jul 6, 2017, at 8:04 PM, bilbosax <waspenc...@comcast.net> wrote: > > Erik, I appreciate your in depth explanation, and I think for the most part > you are right. When I do not set a skinClass and let Flex use the default > for mobile development is when I get the best performance from the > textInput, meaning that the soft keyboard and all the features act as I want > them to. But I also get this strange behavior where it shows the text off to > the side before the PopUp gets centered. Setting input.text = null, or > input.text = "" when I closed the popup had no effect the next time the > popup was called, I still got strange text off to the side. So frustrating. > > Setting the skinClass for the textInput to mobile, or iOS solves the problem > of the phantom text showing up off to the side, but for some reason when I > click on the textInput to type in text, the text does not show up starting > at the left edge of the component, it starts out right in the middle of the > textInput component. When I close the soft keyboard, the text then jumps > over to the left edge of the component where it belongs. > > So frustrated, any other thoughts??? I would welcome any suggestions on how > to get the phantom text to be hidden, or how to get mobile or ios themed > textInputs to align left when inputing text. > > Thanks!! > > > > -- > View this message in context: > http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15424.html > Sent from the Apache Flex Users mailing list archive at Nabble.com. >
