Render issueo on Scrolling

Get Help
1

_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

2

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
3

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;
4

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

5

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

6

I’m starting to research this. First issue that I’m covering is the heights of each of the components is WAY off. Lightning requires accurate width and heights of components for things to work correctly. I recommend you turn on the inspector and look through the app you posted:

Then you can use the dev tools to check the height of the elements.

For instance your rows are height of 100 - but in reality the items are 200 + 100 margin, so the scroll calculations are going to be way off. You can also set a scroll value too:

Hopefully when all the heights of the elements are defined correctly things should work. I’ll keep looking if there is something else. But do your best to set the correct height + widths of all elements including the App, pages, column, rows etc.

7

I added proper height, width of the element, still doesn’t working at all.