Item on a Obsevable list not clickable after adding another item

Bug Reports
1

Hi,

If i click on the “create tab button” one tab is created.

If i click on the tab i get the console.log(“on Tab Clicked”)

If i click again on the “create tab button” another tab is created. If i click on the first tab i get the console.log(“on Tab Clicked”) BUT if i click on the second tab nothing happens (so it’s not clickable anymore)

i guess that’s a bug (or maybe i am doing something wrong)

here u have code (v: 0.21 on a OSX 10.11.4):

<App>
<JavaScript>

    var Observable = require("FuseJS/Observable");
    var tabList = Observable();
    var tabValue = Observable("no value");

    var gTabId = -1;

    function addTab() {
        console.log("add tab");
        gTabId = gTabId + 1;

        tabList.add({
            header: gTabId.toString,
            tabActive: true,
            tabId: gTabId,
        });

        setActiveTab(gTabId);
    }

    function onTabClicked(sender){
        console.log("on Tab Clicked");
        setActiveTab(sender.data.tabId);
    }

    function setActiveTab(tabId){
        console.log("active tab: " + tabId);
        tabValue.value = "Tab active: " + tabId.toString();
    }

      module.exports = {
      addTab: addTab,
      tabList: tabList,
      onTabClicked: onTabClicked,
      tabValue: tabValue
      };
</JavaScript>


<Panel ux:Class="TabHeader" Height="60" Width="65"  Alignment="Center">

    <bool ux:Property="active"/>
    <string ux:Property="header"/>

    <Rectangle ux:Name="bottomLine" Height="2" Fill="#dcdee3" Alignment="Bottom" Offset="0,1" Margin="1,0,1,0"/>

    <Text Value="{Property this.header}" TextAlignment="Center" Alignment="VerticalCenter" TextColor="#000"/> 

    <Rectangle ux:Name="backgroundRect" Layer="Background" Fill="#747474" CornerRadius="10,10,0,0">
        <Stroke Color="#dcdee3"/>
    </Rectangle>

    <WhileTrue Value="{Property this.active}">
        <Change backgroundRect.Fill="#fff"/>
        <Change bottomLine.Fill="#fff"/>
    </WhileTrue>
</Panel>

<StackPanel>
    <Button Height="30">

        <Text Value="Add Tab" TextAlignment="Center" Alignment="VerticalCenter" TextColor="#fff"/> 

        <Rectangle Layer="Background" CornerRadius="10" Fill="#68C4FB">
            <Stroke Width="1" Brush="#68C4FB"/>
        </Rectangle>

        <Clicked Handler="{addTab}"/>
    </Button>

    <StackPanel Orientation="Horizontal" Margin="10,10,10,0">

        <Each Items="{tabList}">
            <Panel>
                <TabHeader active="{tabActive}" header="{tabId}"> 
                    <Clicked Handler="{onTabClicked}"/>
                </TabHeader>
            </Panel>
        </Each>
    </StackPanel>

    <Rectangle Margin="10,0,10,0" CornerRadius="0,10,10,10" Height="100"> 
        <Stroke Color="#dcdee3"/>
        <Text Value="{tabValue}" TextColor="#000" Margin="5,5,0,0"/>
    </Rectangle>
</StackPanel>
2

Hi,

This does indeed look like a bug. I’ve created an internal issue for it, and will make sure it gets followed up.

3

Hi,

The associated internal issue is now reported fixed (was already fixed but not rolled out yet), so this problem should go away in an upcoming release.

Let us know if the problem persists, and thanks for reporting.

4

not solved in 0.22

:_(((

5

I just tested this on local preview and on Android, it works without any problem. Have you done a uno clean in your project?

6

sorry!! it’s working :slight_smile: thnx!!