Flex 4.6 TextInput with prompt on ios misbehaves

Question

On ios, the TextInput makes weirdness. The following code:

        <s:TextInput id="password" width="100%" displayAsPassword="true"
                     needsSoftKeyboard="true" 
                     prompt="Password"  
                     softKeyboardType="default"
                     returnKeyLabel="done"
                     autoCorrect="false"
                     skinClass="spark.skins.mobile.TextInputSkin"
                     />

When I select the textInput, the prompt disappears as expected but the first character is auto selected. When the second key is pressed, the first character is removed. This only happens when the first character is typed and the field has a prompt message. "autoCorrect" does not seem to do anything.

Does anyone know of a workaround to this issue? I looked at the SkinnableTextBase class but can't find any guilty code.

This issues started with Flex 4.6.

Answer 1

After spending hours in the Flex code, I finally realised that Flex isn’t the problem. The issue happens with Air 3.2 (also in Air 3.3 beta). If I compile with Air 3.1, everything works fine.

I have tried various things and there seems to be no way I can fix it in Air 3.2 +. I checked other projects of mine and it seems like all my applications compiled with Air 3.2 have a similar issue :(

[UPDATE]

The problem is somewhere in SkinnableTextBase.as in Flex SDK.

When textDisplay_changeHandler(event:Event) is called, invalidateSkinState() causes the problem. If you set the skin's state to nothing (""), it works:

skin.currentState = "";
invalidateSkinState();

The problem is that the theme doesn't update properly (and it's a h@ck).

If you set "showPromptWhenFocused" to false in your CSS, the problem doesn't happen; the only side effect is that the prompt disappears when you have the textInput selected.

s|TextInput
{
    skinClass:ClassReference("spark.skins.mobile.TextInputSkin");
    showPromptWhenFocused: false;
}

Hope this helps someone.

Answer 2

Are you scrolling the TextInput? If not you can use the new Flex 4.6 TextInput mobile skin. The new skin utilizes StageText which may correct your problems. Remove the attribute skinClass="spark.skins.mobile.TextInputSkin" and it should default to the new skin.

<s:TextInput id="password" width="100%" displayAsPassword="true"
                 needsSoftKeyboard="true" 
                 prompt="Password"  
                 softKeyboardType="default"
                 returnKeyLabel="done"
                 autoCorrect="false"
                 />

Note: StageText does not render properly if you scroll the TextInput and you must use the Flex 4.5 mobile skin as you currently are.

Answer 3

Flying problem is solved for Textinput with spark skins with FB4.6 and Air3.5. I think the actual problem is from Air. But now the Softkeyboard is not activating when focused.

<s:TextInput id="mail"  softKeyboardType="email" skinClass="spark.skins.spark.TextInputSkin" />