Instead of moving the focus to the items, items are scrolling to the focus about lightning HOT 7 CLOSED

Can you provide a little more context about the implementation? Maybe share a working example?

from lightning.

Sure.After adding the list component in our project we are facing this issue.
we used Flex for the items.
static _template() {
return {
Items: {
flex: {direction: 'column'},
},
};
}
get active() {
return this.tag('Items').childList._items[this._childIndex];
}
And also used setIndex() for the list of items:
_setIndex(newIndex) {
this._itemsIndex = newIndex;
const childList = this.tag('Items').childList;
const currentId =
this._items[this._itemsIndex].id();
for (let i = 0; i < childList._items.length; i++) {
const id = childList._items[i].item.id();
if (id === currentId) {
this._childIndex = i;
break;
}
}
const newY =
this._childIndex < 1 ? 0 : -(this._childIndex * (this.active.renderHeight) - 135);
this.tag('Items').patch({y: newY});
}
_newItem(item) {
return {
w: 669, h: 135,
clipping: true,
flexItem: {marginTop: 0},
item: item,
type: item.type,
};
}
_focus() {
this._setIndex(this._itemsIndex);
}
_getFocused() {
return this.active;
}
}
This is the screen shot for the app before adding the list component

screenshots.zip

After adding the list component we are getting the focus issue as you can see in the screen shot the list is moving upwards and there is a gap in the screen.
But before adding the list component we did not faced this issue.

please let me know.

Thanks.

from lightning.

There is indeed a solution to prevent this, the problem can be found in this specific part of code:

this._childIndex < 1 ? 0 : -(this._childIndex * (this.active.renderHeight) - 135);
this.tag('Items').patch({y: newY});

You always calculate and set the new y position of the items list, despite the fact if we reach some of the last items. You can fix this in a couple of ways:

// we do always store the new index because this is used
// the move the focus path to the correct item
this._itemsIndex = newIndex;
// grab the height of the list
const listMaxHeight = this.tag("Items").finalH;
// define the height of the renderable viewport
const viewportHeight = 1080;
// calculate the max y position we want to scroll
const maxYPosition = listMaxHeight - viewportHeight;
// calculate the new position items position
const newY = newIndex< 1 ? 0 : -(newIndex * (this.active.renderHeight) - 135);

// we only set the new y position of the list
// if it's lower then max position we want to scroll
if(Math.abs(newY) < maxYPosition){
    this.tag('Items').patch({y: newY});
}

Let me know if this works out for you

from lightning.

Thanks for the reply.

It worked to adjust the list items.But I'm still have the issue with the focus.When I'm changing from first channel to second channel the focus is shifting when I go to the third channel the focus is not moving just list element is moving likewise after 10 channels again the focus is moving.

I added a video clip for better understanding.
Attached the list file too.

File from iOS.zip

List.zip

Thanks

from lightning.

I think i kind get the idea where you want to work to, you only want the list to move when it reached the bottom of the screen? Also the focus is shifting from one element to the next there are just 2 seperate things happening:

1: the new focuspath is being calculated / and changed
2: the list is moving.

The moving of the list has no relation to the focus change (keep in mind, the focus delegation is only used for letting Lightning know which component is active and should handle the key events).

In your example you are decreasing / increasing an index respectively via _handleUp and _handleDown. So the focus is changing from one element to the other but i think the list is just not scrolling as you want i to be. You can tweak the behaviour of the list so it maybe only move when you try to focus an offscreen element.

Hope this clear things up a bit.

from lightning.

Thanks erik for the reply.
I tried above mentioned steps not to scroll the list.I just want to move the focus from one element to other element without scrolling the list.The list is automatically scrolling.I tried to tweak the list but I'm unable to tweak the behavior of the list.
Could you please help me with any suggestion how to tweak the list.

Thanks

from lightning.

You could change the code a bit to this:

// we always store the new index because this is used 
// to move the focus path to the correct item
this._itemsIndex = newIndex;
// grab the height of the list
const listMaxHeight = this.tag("Items").finalH;
// define the height of the renderable viewport (this can be any
// given positive number but must be equal or larger then the height of an item)
const viewportHeight = 1080;
// defines the items we can show per page
const itemsPerPage = Math.floor(viewportHeight / 135);
// defines page height
const pageHeight = itemsPerPage * 135;
// calculate current page in which the current focused is
const currentPage = Math.floor(newIndex / itemsPerPage);

// check if the new calculated page index if different
// from the stored page index
if (currentPage !== this._storedPage) {

    // calculate the new position for the items list
    let newYPosition = pageHeight * -currentPage;

    // calculate the difference between total items height
    // and the amount of pixels that we've moved the list,
    // we're going to use this for aligning the list to the bottom
    const diff = listMaxHeight - (Math.abs(newYPosition));

    // if the difference is lower then the viewportHeight
    // we add the remainder to the new position, resulting
    // in a position that aligns the list to the bottom
    if (diff < viewportHeight) {
        newYPosition += viewportHeight - diff;
    }

    // animate to the new position
    this.tag('Items').patch({
        smooth:{y: newYPosition}
    });

    // and store the new index
    this._storedPage = currentPage;
}

This will move the focus down to the point where it reaches the end of the list, when it tries to change to focus to an item thats outside the viewport it will move the complete list up so the new focused element is in the top of the viewport.

from lightning.