Changing TextInput.IsPassword on the fly

Bug Reports
1

Here’s a are a case for changing the TextInput.IsPassword property on the fly and just getting the first change made. The button’s text is changing and the console shows the value changed correctly. What could it be?

<App>
	<JavaScript>
		var Observable = require('FuseJS/Observable');

		var textPassword = Observable("");
		var textShowPassword = Observable("Show");
		var showPassword = Observable(true);

		module.exports = {
			textPassword : textPassword,
			textShowPassword : textShowPassword,
			onShowPassword : function onShowPassword() {
				showPassword.value = !showPassword.value;
				textShowPassword.value = showPassword.value ? "Show" : "Hide";
			}
		}
	</JavaScript>

	<TextInput
		ux:Class="_TextInput"
		HitTestMode="LocalBoundsAndChildren"
	    Height="20"
		FontSize="14">
	    <Clicked>
	        <GiveFocus Target="this" />
	    </Clicked>
	    <WhileFocused>
	        <Rectangle Dock="Bottom" Fill="#5184e5" Height="1" />
	    </WhileFocused>
	    <WhileNotFocused>
	        <Rectangle Dock="Bottom" Fill="#ddd" Height="1" />
	    </WhileNotFocused>
	</TextInput>

	<StackPanel Margin="20">
        <Text FontSize="10" Value="PASSWORD"
    		TextAlignment="Left" Margin="0,0,0,10" TextColor="#b1b1b1"/>

        <Panel Alignment="Top" HitTestMode="LocalVisualAndChildren">
            <_TextInput ux:Name="TextPassword" Alignment="VerticalCenter" MaxLength="15"
                FontSize="18" IsPassword="true" Value="{textPassword}"
                TextWrapping="Wrap" ActionStyle="Next"/>
            <Button ux:Name="ButtonShowPassword" Alignment="Right" ZOffset="1">
                <Text ux:Name="TextShowPassword" Value="{textShowPassword}" TextColor="#b1b1b1" FontSize="10"
                    TextAlignment="Right" Alignment="Right">
                </Text>
                <Clicked>
                    <Callback Handler="{onShowPassword}" />
                    <Set Target="TextPassword.IsPassword" Value="{showPassword}"/>
                </Clicked>
            </Button>
        </Panel>
	</StackPanel>
</App>
2

Could not change the post title. Must say IsPassword :stuck_out_tongue:

3

Changed the thread title for you :slight_smile:

4

Hi Hector,
the biggest problem with the code up there is that you’re trying to data-bind the Value of a Set trigger. To me that looks like a recipe for disaster.

Your use-case could be solved easily by directly data-binding the IsPassword property to the Observable boolean you already have:

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var textPassword = Observable("");
        var textShowPassword = Observable("Show");
        var showPassword = Observable(true);

        module.exports = {
            textPassword : textPassword,
            textShowPassword : textShowPassword,
            onShowPassword : function onShowPassword() {
                showPassword.value = !showPassword.value;
                textShowPassword.value = showPassword.value ? "Show" : "Hide";
            },
            showPassword: showPassword
        }
    </JavaScript>

    <TextInput
        ux:Class="_TextInput"
        HitTestMode="LocalBoundsAndChildren"
        Height="20"
        FontSize="14">
        <Clicked>
            <GiveFocus Target="this" />
        </Clicked>
        <WhileFocused>
            <Rectangle Dock="Bottom" Fill="#5184e5" Height="1" />
        </WhileFocused>
        <WhileNotFocused>
            <Rectangle Dock="Bottom" Fill="#ddd" Height="1" />
        </WhileNotFocused>
    </TextInput>

    <StackPanel Margin="20">
        <Text FontSize="10" Value="PASSWORD"
            TextAlignment="Left" Margin="0,0,0,10" TextColor="#b1b1b1"/>

        <Panel Alignment="Top" HitTestMode="LocalVisualAndChildren">
            <_TextInput ux:Name="TextPassword" Alignment="VerticalCenter" MaxLength="15"
                FontSize="18" IsPassword="{showPassword}" Value="{textPassword}"
                TextWrapping="Wrap" ActionStyle="Next"/>
            <Button ux:Name="ButtonShowPassword" Alignment="Right" ZOffset="1">
                <Text ux:Name="TextShowPassword" Value="{textShowPassword}" TextColor="#b1b1b1" FontSize="10"
                    TextAlignment="Right" Alignment="Right">
                </Text>
                <Clicked>
                    <Callback Handler="{onShowPassword}" />
                </Clicked>
            </Button>
        </Panel>
    </StackPanel>
</App>