search

Shopify / ui-extensions

MIT License
268 stars 36 forks source link

[POS UI Extension] <List /> `onEndReached` broken #1861

Open timvandam opened 7 months ago

timvandam commented 7 months ago

Please list the package(s) involved in the issue, and include the version you are using

@shopify/retail-ui-extensions-react @ 1.5.1

Describe the bug

The issue is twofold:

  1. The component is calling the onEndReached prop before reaching the end of the list.
  2. When the number of rows shrinks it will stop calling onEndReached, making the list incomplete

Steps to reproduce the behavior:

  1. Create a list that shows a toast message in the onEndReached prop
  2. Have the number of rows shrink and see the toasts stop

Expected behavior

It should call onEndReached when the end is reached, and it should support the number of rows decreasing

Screenshots

This video shows both issues

https://github.com/Shopify/ui-extensions/assets/35376389/062b16ec-1a30-4bbe-b354-2d31294637ca

Additional context

The only workaround I have found is to set key on List, but this makes it flicker :/ 

timvandam commented 7 months ago

Another work around is to ensure that data becomes an empty array. This seems to reset something internally that causes it to continuously call onEndReached again

jordanfinners commented 3 months ago

I've seen this as well 😢 See the exact same thing as you @timvandam

timvandam commented 3 months ago

I've seen this as well 😢 See the exact same thing as you @timvandam

I've added my own pagination buttons as a workaround. Without this the list would grow large enough to cause lag