# TargetList with 2 children acts really weird on animation

**URL:** <https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291>\
**Category:** Archived\
**Tags:** roku-developer-program\
**Created:** [August 14, 2017, 6:30pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291 "2017-08-14T18:30:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DDukesterman](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DDukesterman](https://forum.developer.roku.com/u/DDukesterman)\
**Post date:** [August 14, 2017, 6:30pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/1 "2017-08-14T18:30:39Z")

</div>

I am having trouble with the TargetList’s last child not animating correctly. On animation, the last child turns a different color. Here is a clip of what it looks like. [https://photos.google.com/share/AF1QipM … FtaGJtT1Vn](https://photos.google.com/share/AF1QipMeEORvQ9Rs3tC0swUhmBQoAxRpOgZk2DIMvhDfLpW7q1dW8HXcHVG8spW6EfOV1A?key=cUcyTW9pVVlBemhvSjhJWUtHdXhkeDFtaGJtT1Vn)

EDIT: It is doing it on the last item in the list. I have tried a 3 and 4 item size list. The last child always changes color on the list animation.

Below is the xml file for the CustomTargetList:

```auto
<?xml version="1.0" encoding="UTF-8"?>
<component name="RowT2TargetGroup" extends="TargetList">

 <interface>
 </interface>

    <script type="text/brightscript" >
    <![CDATA[
 function init()

 m.top.observeField("focusedChild", "focusedChildChanged")
 m.top.observeField("itemFocused", "itemFocusedChanged")
        m.top.observeField("itemUnfocused", "itemUnfocusedChanged")

 m.top.defaultTargetSetFocusIndex = 0

 m.top.advanceKey = "right"
 m.top.reverseKey = "left"

 m.top.wrap = false

 m.top.itemComponentName = "SimpleItemComponent"

 targetSet1 = createObject("roSGNode", "TargetSet")
 targetSet1.focusIndex = 0
 targetSet1.targetRects = [
  { x:50, y:2,  width:594, height:333 },
  { x:650, y:10,  width:566, height:318 }
  ]

 targetSet2 = createObject("roSGNode", "TargetSet")
 targetSet2.focusIndex = 1
 targetSet2.targetRects = [
  { x:64, y:10,  width:566, height:318 },
  { x:636, y:2,  width:594, height:333 }
  ]

 m.top.focusedTargetSet = [targetSet1,targetSet2]

 unfocusedTargetSet = createObject("roSGNode", "TargetSet")
 unfocusedTargetSet.targetRects = [
  { x:64, y:10,  width:566, height:318 },
  { x:650, y:10,  width:566, height:318 }
  ]

 m.top.unfocusedTargetSet = unfocusedTargetSet

 m.top.targetSet = m.top.focusedTargetSet[0]

 m.top.showTargetRects = true

    end function

 function itemFocusedChanged()
        print "itemFocused changed to: "; m.top.itemFocused
    end function

    function itemUnfocusedChanged()
        print "itemUnfocused changed to: "; m.top.itemUnfocused
    end function

    ]]>
    </script>

    <children>
    </children>

</component>

```

Below is how I am declaring it:

```auto
sun init() 
        '... stuff here

        m.row = createObject("roSGNode", "RowT2TargetGroup")
        m.row.content = setUpDataModel(2)
        m.top.appendChild(m.row)

        '... stuff here
end sub

function setUpDataModel(maxCount)
    contentRoot = createObject("roSGNode", "ContentNode")
      for i = 0 to maxCount-1
        child = contentRoot.createChild("ContentNode")
        child.title = "Item " + i.tostr()
    end for
    return contentRoot
end function

```

ComponentName Class:

```auto
<?xml version="1.0" encoding="utf-8" ?>

<component name="SimpleItemComponent" extends="Group" >

<!-- Note that target and rect are both set during the interpolation -->
<interface>
    <field id="index"       type="int" />
    <field id="groupHasFocus" type="boolean" onChange="focusPercentChanged"/>
    <field id="itemContent" type="node"   onChange="itemContentChanged" />
    <field id="currTarget"  type="float"  onChange="currTargetChanged" />
    <field id="currRect"    type="rect2d" onChange="currRectChanged" />
    <field id="focusPercent" type="float" onChange="focusPercentChanged" />
</interface>

<script type="text/brightscript" >
<![CDATA[
    function init()
        m.theRect  = m.top.findNode("theRect")
        m.theLabel = m.top.findNode("theLabel")
    end function

    function itemContentChanged()
        ?"itemContentChanged"
        m.theLabel.text = m.top.itemContent.title
    end function

    function currRectChanged()
      m.theRect.width       = m.top.currRect.width
      m.theRect.height      = m.top.currRect.height
    end function

    function focusPercentChanged()
        if (m.top.groupHasFocus)
            'm.focusColorInterp.fraction = m.top.focusPercent
        else
            'm.focusColorInterp.fraction = 0
        end if
    end function
]]>
</script>

<children>
    <Rectangle id="theRect" color="0xff0000">
        <Label id="theLabel" translation="[10, 10]" />
    </Rectangle>
</children>

</component>

```

---

<div class="post-metadata">

**Author:** ![bryandunbar42](https://avatars.discourse-cdn.com/v4/letter/b/59ef9b/32.png) [@bryandunbar42](https://forum.developer.roku.com/u/bryandunbar42)\
**Post date:** [October 19, 2018, 4:26pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/2 "2018-10-19T16:26:24Z")

</div>

Did you ever get this working? I’m having the same problem.

---

<div class="post-metadata">

**Author:** ![joetesta](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@joetesta](https://forum.developer.roku.com/u/joetesta)\
**Post date:** [October 22, 2018, 3:28pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/3 "2018-10-22T15:28:20Z")

</div>

A workaround is to add two additional offscreen elements, one on each end. to the targetRects. These offscreen elements suppress the blinking of the onscreen ones.

something like:

```auto
targetSet1.focusIndex = 1 ' <---- note this was bumped up to account for new element'
 targetSet1.targetRects = [
  { x:-595 y:2 width:594, height:333 }, 
  { x:50, y:2,  width:594, height:333 },
  { x:650, y:10,  width:566, height:318 },
  { x:1940, y:2, width:594, height:333 }
 ]

 targetSet2 = createObject("roSGNode", "TargetSet")
 targetSet2.focusIndex = 2
 targetSet2.targetRects = [
  { x:-595 y:2 width:594, height:333 },  
  { x:64, y:10,  width:566, height:318 },
  { x:636, y:2,  width:594, height:333 },
  { x:1940, y:2, width:594, height:333 }
 ]

```

---

<div class="post-metadata">

**Author:** ![bryandunbar42](https://avatars.discourse-cdn.com/v4/letter/b/59ef9b/32.png) [@bryandunbar42](https://forum.developer.roku.com/u/bryandunbar42)\
**Post date:** [October 22, 2018, 10:04pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/4 "2018-10-22T22:04:39Z")

</div>

Doesn’t that make the selection work weird? Or does it ignore off screen targets?

---

<div class="post-metadata">

**Author:** ![joetesta](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@joetesta](https://forum.developer.roku.com/u/joetesta)\
**Post date:** [October 22, 2018, 11:49pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/5 "2018-10-22T23:49:41Z")

</div>

no it doesn’t ignore the offscreen items, but by setting the focusIndex to 1 and 2, it will never focus on the 0 and 3 items.

---

<div class="post-metadata">

**Author:** ![bryandunbar42](https://avatars.discourse-cdn.com/v4/letter/b/59ef9b/32.png) [@bryandunbar42](https://forum.developer.roku.com/u/bryandunbar42)\
**Post date:** [October 23, 2018, 3:38pm UTC](https://forum.developer.roku.com/t/targetlist-with-2-children-acts-really-weird-on-animation/6291/6 "2018-10-23T15:38:55Z")

</div>

Great thanks for the tip, worked like a charm. Hopefully Roku can fix this bug.