Hi everyone. I'm have a ListBox on the page and when I press up or down key, instead of navigating to next/previous item, it does page down/up. How can I navigate by only one item up/down? The examples on the Radzen website have the same problem. I'm using version 4.24.6.
We have a branch keyboard-navigation where this is implemented - it will be merged and released most probably before the end of the month.
Thanks. I really hope it's as soon as possible. I have an installation in less than two weeks and without it, the usefulness won't be good.
If you are in a hurry you can build it locally from the mentioned branch.
Vladimir, thank you. Maybe I will try it.
Hi all
@Tomaz
Looking at the ListBox on the demo site, it does only move to the next item. However, the scroll position is always updated to put the selected item at the top of the view. This gives the appearance that it is jumping, rather than a smooth scroll.
@enchev
From the branch keyboard-navigation, I checked the "focusListItem" function and this still occurs. I have put together a change to this function (and some minor changes to other files). This is a demo showing the new stuff in action RadzenListBox and AutoComplete Demo
Would you like these changes sending on? If so, how would I go about it? I can't fork another branch at the moment as I'm currently in the middle of a PR for the Scheduler changes.
Regards
Paul
You can fork as many branches as you want - there is no any limitation.
Not sure what you've tested however here is how ListBox keyboard navigation behaves in the mentioned branch:
This is what I tested. When pressing ArrowDown key when the selected item is at bottom of the viewport, it will select the next item, but then it sets the scroll position in such a way that it centralises the selected item. It becomes less intuitive the taller the ListBox. In the first example on the ListBox demo page, edit the code and set the height to 600px as an example.
I have updated my Demo Page to include a basic html snippet showing
<select><option /></select>
exhibiting how standard list navigation behaves, including PageUp / PageDown.
Regards
Paul
As always we are open to any improvements! You can make a pull request against our keyboard-navigation branch and we will review and merge your code if everything works correctly.
1 Like
Hi Paul,
You're right, sorry, haven't noticed it. I had similar items in the list and didn't see the exact change.
Thank you guys for looking into it. You're awesome.
Regards
Tomaz
Hi @enchev
I'm at a standstill with this. Got it all working (arrow down, page down e.t.c.), but have the same problem as the "keyboard-navigation" branch. It won't work with virtualization. The bottom two examples on the ListBox page don't function as they should.
Any ideas?
Regards
Paul
The only option I can think of is to select the data item not just focus the HTML element in case of virtualization turned on.