-
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.mp4There are two UX issues here which I'm trying to see how I can handle with Ariakit:
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:
<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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
The idiomatic solution is to apply .select-item:nth-last-child(1 of .select-item) {
scroll-margin-block-end: 2rem;
}
I believe this occurs because the |
Beta Was this translation helpful? Give feedback.
The idiomatic solution is to apply
scroll-margin
to the last item:I believe this occurs because the
keydown
event, which checks forfocusLoop
, executes before React even updates theloading
state. You could use themoveOnKeyPress
prop as a function and check the scroll position or another synchronous state. However, I think th…