Appending items to a RowList row re-lays out the whole row, rebinding every visible item, and stops a held scroll

Roku Developer Program
1

Device: Roku Ultra 4800RW, OS 16.0.4 build 834, 1080p (FHD channel)
Component: RowList, rowFocusAnimationStyle: “fixedFocus”
Severity: Medium. Paging a row’s items in as the user scrolls along it (what currFocusColumn is documented for) makes every visible item flash as it reloads, and a user holding RIGHT is stopped as each page arrives.

Summary

Appending items to the end of the focused row (row.appendChildren(items)) has RowList lay the row out again from the focused item, even though none of the items on screen have changed. Once the row has been scrolled along, every visible item component is given a different item’s content: the components are handed out again across the row, starting from the focused item. With images, each one visibly reloads. replaceChild on the focused row does the same.

If a LEFT/RIGHT is being held when the append happens, the held scroll stops and doesn’t carry on, even though the key is still held. A held scroll that has already stopped at the row’s last item doesn’t carry on into the new items either, until the key is released and pressed again.

Setting fields on items already in the row doesn’t cause any of this: only those items’ components are given their content again (the same node), and the row isn’t laid out again.

Steps to reproduce

  1. Create a Scene containing a RowList with two rows: row 0 with 4 items and row 1 with 12 items. Set rowFocusAnimationStyle: “fixedFocus”, vertFocusAnimationStyle: “fixedFocus”, itemSize: [1749, 330], rowItemSize: [[398, 330]], rowItemSpacing: [[24, 0]], numRows: 3, and give it focus. Use an item component that prints its index and the id of each itemContent it’s given.
  2. Press DOWN to focus row 1, then RIGHT 6 times, and wait for focus to come to rest.
  3. Append 8 new ContentNodes to row 1.
  4. Separately: focus row 1, hold RIGHT, and append 8 new ContentNodes from a Timer while it’s still held.

Expected

Step 3: the visible item components keep their content. The new items are only bound when scrolled into view.
Step 4: the held scroll carries on into the new items.

Actual

Step 3: every visible item component is given a different item’s content than it was showing. Posters reload, so the whole row flashes.
Step 4: the held scroll stops where it was when the items were appended, although RIGHT is still held.

Notes

  • This is a request as much as a report. Appending to the end of a row, past what’s visible, shouldn’t need the visible items to be laid out again.
  • Workaround: fill the row with placeholder items up to its total when it’s first set, and fill each page in place by setting fields on the placeholders, never adding children to a row on screen. That’s the approach SGDEX’s non-serial row pagination takes (“Populate the row with ‘n’ placeholder content items”). It needs the total up front, and each changed field rebinds that item’s component once, so it’s cheapest with few fields per item.
  • Without placeholders, holding pages back until any held key is released and focus has come to rest stops them interrupting a hold, but the user is stopped at the end of the loaded items, and the row still flashes.