Render issueo on Scrolling

_template:

    List: {
        type: List,
        direction: 'column',
        y: 100,
        x: MENU_WIDTH, w: PAGE_WIDTH - MENU_WIDTH,
        h: SCREEN_HIGHT - 100,
    }

_setup()

this.tag('List').add([
    { x: 10, y: 0, h: 200, w: PAGE_WIDTH, type: Carousel, items: [
        {margin: 15, type: ImageCell, number: 1},
        {margin: 15, type: ImageCell, number: 2},
        {margin: 15, type: ImageCell, number: 3},
        {margin: 15, type: ImageCell, number: 4},
        {margin: 15, type: ImageCell, number: 5},
        {margin: 15, type: ImageCell, number: 6}
    ]},
    {
        x: 10, y: 400, h: 300,
        w: PAGE_WIDTH,
        type: List, direction: 'row',
        Child: {
                    mountX: 1,
                    y: y => y * 0.1 - 100,
                    x: 220,
                    color: Colors('white').get(),
                    text: {
                        text: 'Watch Next', fontFace: 'Londrina', fontSize: 50
                    },
         },
        items: [
            {margin: 15, type: ImageCell, number: 1},
            {margin: 15, type: ImageCell, number: 2},
            {margin: 15, type: ImageCell, number: 3},
            {margin: 15, type: ImageCell, number: 4},
            {margin: 15, type: ImageCell, number: 5},
            {margin: 15, type: ImageCell, number: 6}
           ],
        }
  ])

Getting this error

lightning.js:8322 Uncaught Error: ItemWrapper (:[R]#1:[0]App:[1]Pages:[1]#26:[0]Content:[0]List:[0]Wrapper:[6]IW-f6yskpq4m:[0]#803:[0]Wrapper:[0]IW-i5zl2d5wn): Return value for _getFocused must be an attached descendant component but its ':[R]#1:[0]App:[1]Pages:[1]#26:[0]Content:[0]List:[0]Wrapper:[6]IW-f6yskpq4m:[0]#803:[0]Wrapper:[0]IW-i5zl2d5wn:[0]#816'

Any Help is appriciated

Hi @all, we are also stuck with the same problem. We have a long list and as we scroll down, we see the UI elements from the top are disappearing from the screen. At this point if we scroll up, we see the same crash message.

Any pointers will be of great help. Below is the crash log

Uncaught Error: ItemWrapper (:[R]#1:[0]App:[1]Pages:[1]#26:[0]Content:[0]List:[0]Wrapper:[4]IW-on2ifbhgs:[0]#879:[0]Wrapper:[0]IW-wkiq0vfa5): Return value for _getFocused must be an attached descendant component but its ':[R]#1:[0]App:[1]Pages:[1]#26:[0]Content:[0]List:[0]Wrapper:[4]IW-on2ifbhgs:[0]#879:[0]Wrapper:[0]IW-wkiq0vfa5:[0]#892'

1 Like

That error happens when the component returned from _getFocused is not on the screen. In your case the items inside the scroll are probably off screen, receiving focus and then animating onto the screen (that is my initial thoughts).

Two ways you could try fixing:

  1. Have the offscreen element slightly visible on the screen to indicate to users there is more to scroll to
  2. Change the boundsMargin so Lightning will activate elements that are off the visible screen.
/**
     * Sets a Bounds Margin for this Element.
     *
     * Format:
     * ```text
     * [left margin, top margin, right margin, bottom margin]
     * ```
     *
     * - If `null` (default):
     *   - Inherit from Bounds Margins from parent
     *
     * Note: If no bounds margins are set in the render tree, the default on all
     *       sides is `100`.
     *
     * @remarks
     * The Bounds Margin influences whether an Element will be rendered as if it were
     * on screen. If the Bounds Margin is `0` on all sides, then this Element will only be
     * rendered if exactly any part of it's rectangle is potentially visible on screen. Adding
     * to the Bounds Margin allows an Element to be rendered as it gets closer to becoming
     * visible on screen.
     *
     * @defaultValue null
     */
    boundsMargin: [number, number, number, number] | null;

Hi, I have same issue, I tried

boundsMargin: [200, 200, 200, 200],

Still having the same issue.

static _template() {
        return {
            ...super._template(),
            Content: {
                List: {
                    type: List,
                    direction: 'column',
                    boundsMargin: [200, 200, 200, 200],
                    y: 100,
                    x: 300,
                    w: 600,
                    h: 800,
                },
            }

        }
    }
    getCards  () {
        const items = [];
        for (let j = 0; j < 20; j++) {
            items.push({
                margin: 15, type: ShowCardVertical,
                boundsMargin: [200, 200, 200, 200],
                title: 'Watch Now',
                description: 'Description',
                number: 1
            });
        }
        return items;
    }

    getItems() {
        const items = [];
        for (let j = 0; j < 10; j++) {
            items.push({
                margin: 100,
                h: 100,
                w:600,
                boundsMargin: [200, 200, 200, 200],
                direction: 'row',
                type: List, 
                items: this.getCards(),
            });

        }
        return items
    }

    doSetup() {
        this.tag('List').add(this.getItems())
    }

    _update() {

    }

    _attach() {
        this.doSetup();
    }

    _setup() {
        this.doSetup();
    }

    _getFocused() {
        return this.tag('List') || this
    }

    static get header() {
        return 'Home';
    }

This code is prepared based on the example provided UI-component-examples

And the idea here is, we want to scroll the image cards both on verical as well as horizontal ( row and coloumn )

So, I took the List type with direction “coloumn” and then added items of List type with direction “row”.

Any help on the scrolling error is appriciated

Hi All,
I have attached full source on which I am trying this scroll issue.
MyTV-Scroll

Any help / suggestion on this very much appriciated