# \`Each\` incompatible with \`Selectable\`

**URL:** <https://forums.fusetools.com/t/each-incompatible-with-selectable/6646>\
**Category:** Bug Reports\
**Created:** [November 28, 2016, 8:18pm UTC](https://forums.fusetools.com/t/each-incompatible-with-selectable/6646 "2016-11-28T20:18:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 28, 2016, 8:18pm UTC](https://forums.fusetools.com/t/each-incompatible-with-selectable/6646/1 "2016-11-28T20:18:14Z")

</div>

It seems when making use of the `Selectable` class, and assigning a property as the `value`, this only functions correctly if the property directly comes from an observable or a literal value.

If an `Each` is used, and a value from the iterated array is passed as the property assigned to `Selectable` then it does not function correctly (`ToggleSelection` assigns an empty value to the `Selection` target instead)

In a current project I have a CustomClass, which contains `Text`, a `Selectable`, and a `ToggleSelection` `Tapped` event.

If I pass a literal as the property for the `Text` and `Selectable` it functions as expected:

```auto
<CustomClass Value="value" />

```

If I pass a property as the property for the `Text` and `Selectable` it also functions as expected:

```auto
<CustomClass Value="{Property value}" />

```

If I pass the value of an iterated property as the property for the `Text` and `Selectable` it **fails** :

```auto
<Each Items="{Property list}" >
    <CustomClass Value="{}" />
</Each>

```

Note that in the last case the property value appears in the `Text` fine. It simply does not work in the `Selectable`.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [November 29, 2016, 7:21am UTC](https://forums.fusetools.com/t/each-incompatible-with-selectable/6646/2 "2016-11-29T07:21:58Z")

</div>

Hi!

I need to see more of you code to know why it doesn’t work. I made a test here and using ux:Property and iterating over data from JS works fine. Here is my code, it might point you in the right direction:

```auto
<App>
	<Panel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");

			module.exports.foo1 = Observable(1,2,3,4,5);
			
			module.exports.foo2 = Observable("now","testing","with","strings");
		</JavaScript>

		<Panel ux:Class="Foo" Height="50" Color="Red" Margin="2" Value="Foo">
			<string ux:Property="Value" />
			
			<Text Value="{ReadProperty Value}" Alignment="Center" FontSize="25" Color="White" />
			<Selectable Value="{ReadProperty Value}"/>
			<Clicked>
				<ToggleSelection />
			</Clicked>
			<WhileSelected>
				<Change this.Color="Blue" Duration="0.2"/>
			</WhileSelected>
		</Panel>

		<Grid ColumnCount="2">
			<StackPanel>
				<Selection MaxCount="1" MinCount="1"/>
				<Each Items="{foo1}">
					<Foo Value="{}" />
				</Each>
			</StackPanel>
			<StackPanel>
				<Selection MaxCount="1" MinCount="1"/>
				<Each Items="{foo2}">
					<Foo Value="{}" />
				</Each>
			</StackPanel> 
		</Grid>
	</Panel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 29, 2016, 4:52pm UTC](https://forums.fusetools.com/t/each-incompatible-with-selectable/6646/3 "2016-11-29T16:52:22Z")

</div>

Thanks Kristian, this has helped me corner it down

My selection items were wrapped in a `WhileTrue` and their visibility toggled when something was selected (this was for a dropdown control).

When their `Selectable` was no longer visible/existed the `Selection` would get wiped, but only if it was a locally scoped value, so observables and literals were fine (presumably literals lifetimes are global).

Toggling the visibility on them instead seems to solve the problem.

Cheers