# WhileTrue not updating when Observable updated from JS

**URL:** <https://forums.fusetools.com/t/whiletrue-not-updating-when-observable-updated-from-js/5531>\
**Category:** General\
**Created:** [January 25, 2016, 10:46am UTC](https://forums.fusetools.com/t/whiletrue-not-updating-when-observable-updated-from-js/5531 "2016-01-25T10:46:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![skezo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/skezo/32/34_2.png) [@skezo](https://forums.fusetools.com/u/skezo)\
**Post date:** [January 25, 2016, 10:46am UTC](https://forums.fusetools.com/t/whiletrue-not-updating-when-observable-updated-from-js/5531/1 "2016-01-25T10:46:24Z")

</div>

**Expected:** If I enter four digits the button should be enabled. If I enter more than four values the `valueChanged` function will remove the additional values and return a string with a length of four. If these four values are four digits the button should be enabled.

**Currently:** If I enter exactly four digits the button is enabled. However, if I enter more than four values the `valueChanged` function will remove the additional values and return a string with a length of four. If these four values are four digits the button remains disabled. Deleting the fourth digit and adding it back in will enable the button.

I am sure I am doing something stupid here and missing something obvious. Any help or guidance on this would be greatly appreciated.

In an external `JS` file:

```auto
var Observable = require('FuseJS/Observable');
var inputValue = Observable("");
var isValid = Observable( function() { return inputValue.value.length === 4 && /\d{4}/.test(inputValue.value) } );

var valueChanged = function (args) {
    if(args.value.length > 4) {
        inputValue.value = args.value.substring(0, 4)
    }

    console.log( isValid.value, inputValue.value )

}

module.exports = {
    inputValue: inputValue,
    isValid: isValid,
    valueChanged: valueChanged
};

```

In the `UX` file:

```auto
<TextInput ux:Name="textInput" ValueChanged="{valueChanged}" Value="{inputValue}" />
<Button Value="Enter" IsEnabled="False" ux:Name="enterButton" />
<WhileTrue Value="{isValid}">
 <Change enterButton.IsEnabled="True" />
</WhileTrue>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 25, 2016, 11:18am UTC](https://forums.fusetools.com/t/whiletrue-not-updating-when-observable-updated-from-js/5531/2 "2016-01-25T11:18:59Z")

</div>

Hi,

This is certainly somewhat strange, but it could be due to async issues when mixing observable logic with manual event handling.

Instead of listening to `ValueChanged` try doing:

```auto
 var corrector = function() {
     if (inputValue.value.Length > 4) {
         inputValue.setExclusive(..., corrector);
     }
 }

 inputValue.addSubscriber(corrector);

```

This should ensure consistent synchronous ordering when handling the events.

Note how we use `setExclusive` to avoid infinite feedback when updating the `inputValue` in response to a change.

---

<div class="post-metadata">

**Author:** ![skezo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/skezo/32/34_2.png) [@skezo](https://forums.fusetools.com/u/skezo)\
**Post date:** [January 27, 2016, 5:17am UTC](https://forums.fusetools.com/t/whiletrue-not-updating-when-observable-updated-from-js/5531/3 "2016-01-27T05:17:31Z")

</div>

Hi Anders

Thanks for this, very helpful.

Quick question is `setExclusive` different from `setValueExclusive`?