Skinning Flex Mobile TextInput

Hi,

I need to skin the Flex Mobile Text Input with a gradient in the background. I have created a skin for that. It works fine on Android devices but in case of iOS devices, the keyboard doesn't even comes up. If I remove the skin, it works fine. I guess the issue is with skinning, but how can I fix this? Below is the skin I created, if it helps:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    alpha.disabledStates="0.5" blendMode="normal">
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script>
        <![CDATA[
        /** 
         * @private 
         */     
        private static const focusExclusions:Array = ["textDisplay"];
        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    
    <!-- border --> 
    <!--- @private -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border"
                              radiusX="5" radiusY="5">
        <s:stroke>     
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" color="0xFFFFFF" weight="1" alpha="0.05" />
        </s:stroke>
    </s:Rect>
    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"
                              radiusX="5" radiusY="5">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <!-- s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0"/-->
  <s:LinearGradient rotation="90">
  <s:GradientEntry color="0x131516"
                                                                                 alpha="1"/>
  <s:GradientEntry color="0x282b31" 
                                                                                 alpha="1"/>
  </s:LinearGradient>
  </s:fill>
    </s:Rect>
    
    <!-- shadow -->
    <!--- @private -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow" alpha="0"
                              radiusX="5" radiusY="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" alpha="0.25" />
        </s:fill>
    </s:Rect>
    
    <!-- text -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt" 
                includeInLayout="false" />
</s:SparkSkin>