`Each` incompatible with `Selectable`

Bug Reports
1

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:

<CustomClass Value="value" />

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

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

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

<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.

2

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:

<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>
3

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