Infinite scroll in Combobox when using keyboard navigation

[bengry]

I'm trying to write a [Select with Combobox](select with Combobox - Ariakit) component on top of Ariakit with Infinite scroll behavior. i.e. the user can scroll to the end of the list to get more items.

This works great for mouse users who scroll, but when using the arrow keys to navigate you can't go past the last item, which means that the infinite scroll loading indicator is never visible for them:

CleanShot.2024-04-15.at.20.30.28.mp4

There are two UX issues here which I'm trying to see how I can handle with Ariakit:

1. The user can't ↓ past the last item, meaning they don't see any loading indicator, and just suddenly the list gets longer after a couple of seconds.

One idea I had on how to fix this is to always keep the next item in view (when one is available). i.e. in this case:

pressing ↓ would scroll the container AND move focus to Norfolk Terrier, rather than just moving focus. This would mean that the spinner would show up when you move to the currently-last item.

2. The focus loops (which is a wanted behavior). Ideally when the infinite loading indicator is visible the focus wouldn't loop.
   I tried dealing with this by adding:

  <Ariakit.ComboboxProvider focusLoop={!loading}>....</Ariakit.ComboboxProvider>

But it doesn't do anything. I think that because the ↓ key is still pressed, Ariakit doesn't make any changes to its internal store, even though the prop has been updated. But I'm not sure.

Any help on solving these two issues would be much appreciated.

Here's a Stackblitz with a reproduction of this example: https://stackblitz.com/edit/vitejs-vite-n2mcmq?file=src%2FApp.tsx

[diegohaz]

1. The user can't ↓ past the last item, meaning they don't see any loading indicator, and just suddenly the list gets longer after a couple of seconds.

The idiomatic solution is to apply scroll-margin to the last item:

.select-item:nth-last-child(1 of .select-item) {
  scroll-margin-block-end: 2rem;
}

3. The focus loops (which is a wanted behavior). Ideally when the infinite loading indicator is visible the focus wouldn't loop.

I believe this occurs because the keydown event, which checks for focusLoop, executes before React even updates the loading state. You could use the moveOnKeyPress prop as a function and check the scroll position or another synchronous state. However, I think the optimal solution in this situation is to simply disable focusLoop altogether.

[bengry]

The idiomatic solution is to apply scroll-margin to the last item

This works beautifully, thanks!

I believe this occurs because the keydown event, which checks for focusLoop, executes before React even updates the loading state. You could use the moveOnKeyPress prop as a function and check the scroll position or another synchronous state.

This doesn't seem to work. See this reproduction.
I think that because the focus loops, the intersection observer doesn't recognize that the item has entered the view area and thus doesn't even fire, but I'm not entirely sure.

[diegohaz]

I see. I still recommend disabling focusLoop statically. You'll still get a loop behavior when moving focus upwards because the includesBaseElement state allows moving from the first item to the combobox input. And while the combobox input has focus, pressing arrow up moves focus to the last item.