Text Input WhileNotFocus doesn't seems to work well

hello there,

I was trying to create a material design text input component. I added in the animation on focus and un-focus, however it doesn’t behave as expected.

  1. on focus, label text should float and change color to yellow - this is working expectedly
  2. on lose focus, if contains text, label text should float and change color to yellow - this is working expectedly
  3. on lose focus, if doesn’t contains text, text label should move back to it’s origin position and change color to black - this is not working as expected

Any idea on how to achieve this?

Code snippets - https://drive.google.com/open?id=0BxujkUcSRVkbZzdOZkpBYWdNUmM

Hi Kencana,

it seems you’re missing the difference between Set and Change. In this case, you would need to deviate from the rest state, and only do that in one single case. Here, I’ve made changes to your MaterialTextInput.ux to make it work as you would expect it to:

<Panel
    Height="40"
    Margin="0,0,0,20"
    IsPassword="false"
    AutoCorrectHint="Default"
    AutoCapitalizationHint="None"
    ActionStyle="Default"
    InputHint="Default"
    Value=""
    ux:Class="MaterialTextInput">

    <!-- properties -->
    <FileImageSource ux:Property="Icon" />
    <string ux:Property="PlaceholderText" />
    <bool ux:Property="IsPassword" />
    <string ux:Property="AutoCorrectHint" />
    <string ux:Property="AutoCapitalizationHint" />
    <string ux:Property="ActionStyle" />
    <string ux:Property="InputHint" />
    <string ux:Property="Value" />
    <!-- end of properties -->

    <Text
        ux:Name="inputLabel"
        Y="10"
        FontSize="14"
        Padding="0,0,0,10"
        Color="#000000"
        Value="{ReadProperty PlaceholderText}">
        <Tapped>
            <GiveFocus Target="textInput" />
        </Tapped>
    </Text>

    <StateGroup
        Transition="Exclusive"
        ux:Name="stateGroup" Active="active">
        <State ux:Name="active">
            <Change inputLabel.FontSize="12" Delay="0.1" />
            <Change inputLabel.Color="#fbc02c" />
            <Change inputLabel.Alignment="Top" />
            <Change inputLabel.Y="-10" Duration="0.1" Weight="1" Easing="CubicInOut" />
            <Change inputBg.Visibility="Visible" Delay="0.1" />
            <Change inputLine.Color="#fbc02c" Delay="0.1" />
            <Change inputBg.Height="40" Duration="0.1" Weight="1" Delay="0.1" Easing="CubicInOut" />
            <Change inputIcon.Opacity="1" Delay="0.2" />
        </State>
        <State ux:Name="inactive">
            <Set inputLabel.FontSize="14" />
            <Set inputLabel.Color="#000000" />
            <Set inputLabel.Alignment="Bottom" />
            <Set inputLabel.Y="0" />
            <Set inputBg.Visibility="Hidden" />
            <Set inputLine.Color="#000000" />
            <Set inputBg.Height="0" />
            <Set inputIcon.Opacity="0" />
        </State>
    </StateGroup>
    <Rectangle
        ux:Name="inputBg"
        Width="100%"
        Alignment="Bottom"
        Layer="Background"
        Height="0"
        Visibility="Hidden">
        <TextInput
            ux:Name="textInput"
            Alignment="Left"
            Width="83%"
            TextColor="#000000"
            CaretColor="#fbc02c"
            PlaceholderColor="#af861f"
            IsPassword="{ReadProperty IsPassword}"
            AutoCorrectHint="{ReadProperty AutoCorrectHint}"
            AutoCapitalizationHint="{ReadProperty AutoCapitalizationHint}"
            ActionStyle="{ReadProperty ActionStyle}"
            InputHint="{ReadProperty InputHint}"
            Value="{Property Value}">
            <WhileNotFocused>
                <WhileContainsText Invert="true">
                    <Change stateGroup.Active="inactive" />
                </WhileContainsText>
            </WhileNotFocused>
        </TextInput>
        <Image
            ux:Name="inputIcon"
            Opacity="0"
            Source="{ReadProperty Icon}"
            Width="20"
            Height="20"
            Margin="20,0,20,0"
            Alignment="Right"/>
    </Rectangle>
    <Rectangle
        ux:Name="inputLine"
        Row="0"
        Column="0"
        Alignment="Bottom"
        ColumnSpan="2"
        Height="2"
        Color="#000000">
    </Rectangle>
</Panel>