Automatically select an item in the dropdown when using arrow keys #34052
Conversation
|
@patrickhlauke addressed the key up/down behaviour you mentioned 👍 |
|
So, this looks good, just one observation. The v4 branch just opens the dropdown on the first arrow down/up and only goes to one direction. |
v4 branch? 😯 I didn't backport it yet, or did I? |
|
I know, just mentioning the differences in the behavior. :) |
|
Oh ok.. 😅 I got a bit confused for sec. If you want me to change it for v4 too, I can do that. |
alpadev
force-pushed
the
alpa/dropdown-arrow-keys-a11y
branch
from
1cff37d to
4734a68
Compare
|
Dang, I tried to rename the branch but I had no idea that the PR will be closed too 😫 |
feat: automatically select an item in the dropdown when using arrow keys test: add test for getNextActiveElement to allow the behaviour of returning the last item in case the active element is absent and we want the previous item and cycling is allowed feat: allow getNextActiveElement to return the last item if the active element is absent refactor: simplify the ARROW_UP_KEY implementation
alpadev
force-pushed
the
alpa/dropdown-arrow-keys-a11y
branch
from
4734a68 to
52dbaf2
Compare
| // if the element does not exist in the list return an element depending on the direction and if cycle is allowed | ||
| if (index === -1) { | ||
| return list[0] | ||
| return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0] |
There was a problem hiding this comment.
Talked with @GeoSot about adding the feature of getting the last item from getNextActiveElement() in case the item is not in the list, we want the previous item and cycling is allowed. (To reflect the case when the dropdown button is the target of the event and the ARROW_UP_KEY is pressed.) He was ok with adding it.
But I'd appreciate to receive some other opinion.
|
@alpadev can you backport this please? |
|
@alpadev @rohit2sharma95 friendly ping about the backport :) |
closes #32954
Preview: https://deploy-preview-34052--twbs-bootstrap.netlify.app/docs/5.0/components/dropdowns/