# Changing TextInput.IsPassword on the fly

**URL:** https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313
**Category:** Bug Reports
**Created:** [November 2, 2016, 6:01pm UTC](https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313 "2016-11-02T18:01:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Hector\_Lizarraga](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/hector_lizarraga/32/434_2.png) [@Hector\_Lizarraga](https://forums.fusetools.com/u/Hector_Lizarraga)
#### Post date: [November 2, 2016, 6:01pm UTC](https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313/1 "2016-11-02T18:01:09Z")

</div>

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?

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![Hector\_Lizarraga](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/hector_lizarraga/32/434_2.png) [@Hector\_Lizarraga](https://forums.fusetools.com/u/Hector_Lizarraga)
#### Post date: [November 2, 2016, 6:04pm UTC](https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313/2 "2016-11-02T18:04:19Z")

</div>

Could not change the post title. Must say `IsPassword` 😛

---

<div class="post-metadata">

### Author: ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)
#### Post date: [November 2, 2016, 6:06pm UTC](https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313/3 "2016-11-02T18:06:34Z")

</div>

Changed the thread title for you 🙂

---

<div class="post-metadata">

### Author: ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)
#### Post date: [November 3, 2016, 10:36am UTC](https://forums.fusetools.com/t/changing-textinput-ispassword-on-the-fly/3313/4 "2016-11-03T10:36:16Z")

</div>

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:

```auto
<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>

```