The Column component ignores lazyItems when setting selectedIndex

[Edward Atencio]

Suppose a Column component with 10 children, from which only 4 are created, and the rest are stored in the _lazyItems array, if you navigate to the 8th element directly (with no animations) by setting column.selectedIndex = 8, the column will truncate the index and focus on the last one that was created, the 4th one.

We made a workaround while the issue is addressed here.

import { Lightning } from '@lightningjs/sdk'
import { Column as LngColumn } from 'lightning-ui-components'
import { getW } from 'lightning-ui-components/utils'
import { clamp } from '../../Utils'

export default class Column extends LngColumn {
    // Add lazy items as needed to reach the desired index
    set lazyIndex(index: number) {
        if (index < 0) return

        if (this._lazyItems && this._lazyItems.length > 0 && index >= this.items.length) {
            const itemsLength = this.items.length
            const lazyItemsLength = this._lazyItems.length
            const totalLength = itemsLength + lazyItemsLength
            const indexClamped = clamp(index, 0, totalLength - 1)
            const lazyItemCount = indexClamped - itemsLength + 1 + this.lazyUpCount
            const lazyItemCountClamped = clamp(lazyItemCount, 0, lazyItemsLength)
            const lazyItems = this._lazyItems.splice(0, lazyItemCountClamped)
            index = indexClamped
            this._appendItems(lazyItems)
        }

        this.selectedIndex = index
    }

    // Append items without adding them to the _lazyItems array
    _appendItems(items: Lightning.Component[] = []): void {
        const itemWidth = this.renderWidth
        this._smooth = false

        items.forEach(item => {
            item.parentFocus = this.hasFocus()
            item = this.Items.childList.a(item)
            item.w = getW(item) || itemWidth
        })

        this.stage.update()
        this._update()
        this._refocus()
    }
}