childList method setAt() not working

[richy7734]

I was trying to implement tabs like UI, for that I wanted to replace an element from the tab body on moving focus to another tab using setAt() method in the childList property.

static _template() {
    return {
      TabsContainer: {
        type: FocusManager,
        direction: 'column',
        signals: {
          tabChanged: '_tabChanged',
        },
        items: [
          {
            y: 24,
            type: TabHeader,
            tabs: __tabList,
            passSignals: {
              tabChanged: true,
            },
          },
          {
            y: 80,
            h: 1080,
            w: 1800,
            type: EpisodesTabContainer,
          },
        ],
      },
    }
  }

  _tabChanged(event) {
    this._currentIndex = event.currentIndex
    switch (this._currentIndex) {
      ...
      case 1:
        this.tag('TabsContainer').Items.childList.setAt(
          {
            y: 80,
            h: 1080,
            w: 1800,
            type: CastTabContainer,
          },
          1
        )
        break
     ...
    }
  }

This throws the following exception

lightning.js:6217 Uncaught TypeError: item._setParent is not a function
    at ElementChildList._connectParent (lightning.js:6217)
    at ElementChildList.onSet (lightning.js:6239)
    at ElementChildList.setAt (lightning.js:6010)
    at StateMachineRouter._setTabBody (details-tab.js:57)
    at StateMachineRouter._tabChanged (details-tab.js:46)
    at StateMachineRouter._signal (lightning.js:8789)
    at StateMachineRouter._signal (lightning.js:8798)
    at StateMachineRouter.signal (lightning.js:8771)
    at StateMachineRouter._onIndexChanged (tab-header.js:24)
    at StateMachineRouter._signal (lightning.js:8789)

[michielvandergeest]

moving this issue to the Lightning Core repository as it doesn't seem to be related to the LightningSDK

P.S. if this is a question (instead of a bug / feature report) you might also be able to get some help on the LightningJS forum: https://forum.lightningjs.io/

[g-zachar]

Hi @richy7734,

the error you're getting is invalid (hence the #314 fix). The setAt method will work only if there is an existent child element of given index. I assume in your case you're trying to use setAt with an index that is outside of children's bounds.

Best regards

[richy7734]

Hi @g-zachar ,

You can check the code I have included in the post, there are two items in TabsContainer and when I call setAt I pass 1 as the second argument. Which means the childrens is an array of 2 elements and I want to replace element in index 1. I guess it's totally fine.

[g-zachar]

Hi @richy7734,

your example shows there are third party components involved which makes it impossible for me to say where the point of failure is. Default components do not support items property in template, which suggests your FocusManager component implements it somehow.

Best regards

[richy7734]

I used FocusManager from rdkcentral/Lightning-UI-Components, which is also an official release from Lightning, I guess.

[g-zachar]

@richy7734

Can you check if you get the same error with #314 patch?

Best regards